Прескочи към съдържанието
🛠️
Whiz Tools

JavaScript Минификатор - Безплатен Онлайн Оптимизатор на JS Код

Безплатен инструмент за минифициране на JavaScript, който намалява размера на кода чрез премахване на празни места и коментари. Оптимизирайте JS файлове незабавно без необходимост от инсталация.

JavaScript Минификатор

Относно този инструмент

Този прост JavaScript минификатор премахва ненужните интервали и коментари, за да намали размера на вашия код. Запазва функционалността, като прави кода по-компактен.

  • Премахва ненужните интервали (празни места, табулации, нови редове)
  • Премахва коментарите (едноредови и многоредови)
  • Запазва низовите литерали и регулярните изрази
  • Поддържа функционалността на кода
Калкулатор за зареждане...
📚

Документация

Какво представлява минификаторът на JavaScript?

Минификаторът на JavaScript е инструмент, който намалява размера на изходния код на JavaScript, като премахва символи, които не са нужни на браузъра, за да изпълни кода, например излишни интервали, нови редове и коментари. След минифициране кодът продължава да прави точно същото. Променя се само размерът на файла.

По-малките JavaScript файлове се изтеглят и зареждат по-бързо, затова минифицирането е обичайна стъпка преди публикуването на уебсайт.

Как работи минифицирането на JavaScript

Този инструмент прочита кода символ по символ и го изгражда наново, като премахва всичко, което е нужно на читателите, но не и на JavaScript енджина. Той премахва:

  • Коментари — както коментарите на един ред // single-line, така и многострочните коментари /* multi-line */, включително коментарите в стил JSDoc.
  • Излишни интервали, табулации и празни редове, които съществуват само за по-лесно четене на кода.

Той не добавя и не премахва нищо друго. Никога не изтрива точка и запетая, скоба или друг символ, който вече е бил в кода, и никога не вмъква нови препинателни знаци. Освен това оставя непроменени няколко неща:

  • Текста в низове ("like this", 'like this') и шаблонни литерали (`like this`), дори ако този текст съдържа интервали или изглежда като коментар.
  • Литералите на регулярни изрази, например /[a-z]+/g, заедно с всичките им флагове: d, g, i, m, s, u, v и y.
  • Всяка точка и запетая, запетая и скоба, които вече са присъствали в оригиналния код.

Понякога интервалът между два токена не може да бъде премахнат, без да се промени значението им. return a не може да стане returna, защото това би се прочело като една дума. Същото важи за имена, изписани с букви извън английската азбука, затова typeof π запазва интервала си. Когато премахването на интервала би сляло два токена, инструментът оставя един интервал.

Новият ред също може да има значение. Понякога JavaScript вмъква автоматично точка и запетая в края на реда — правило, наречено автоматично вмъкване на точка и запетая. Ако изтриването на нов ред може да задейства или да блокира това правило, или ако новият ред следва затваряща фигурна скоба }, инструментът оставя там един нов ред. Затова минифицираният код не винаги се свива до един ред: някои нови редове променят значението на кода и трябва да останат.

Как да използвате този минификатор на JavaScript

  1. Поставете JavaScript кода в полето за въвеждане.
  2. Изберете „Minify“.
  3. Прочетете резултата в полето за извеждане заедно с първоначалния размер, минифицирания размер и процентното намаление.
  4. Изберете „Copy“, за да копирате минифицирания код.

Минифицирането се изпълнява в раздела на браузъра, така че кодът не се качва никъде за обработка. Инструментът също така копира поставения код в адреса на страницата, което улеснява добавянето на резултата в отметки или споделянето му. Следователно всеки, който вижда този адрес, може да види и кода.

Пример: минифициране на функция

Преди:

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

След:

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

И трите коментара изчезват, а отстъпът се премахва. Точката и запетая след a+b остава, защото инструментът никога не изтрива точка и запетая, която вече е била в кода. Новият ред преди const също остава, защото следва затваряща скоба }.

Пример: минифициране на клас

Преди:

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

След:

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

Забележете, че преди всеки метод и преди затварящата скоба на класа } остава нов ред. Всеки от тези нови редове следва затваряща скоба } в оригиналния код, затова правилото, което защитава автоматичното вмъкване на точка и запетая, ги запазва. Точките и запетаите във всеки метод също остават.

Формула за намаляване на размера

Инструментът показва три числа под полето за извеждане: първоначалния размер, минифицирания размер и намалението. Всички размери са брой символи, а не байтове. Намалението е процент, закръглен до най-близкото цяло число:

1reduction = round((1 - minified characters / original characters) x 100)
2

Примерът с функцията по-горе има 213 символа преди минифициране и 103 след него. Следователно 1–103 / 213 = 0,5164, което е 51,64%, а инструментът показва 52%. Примерът с класа намалява от 515 символа до 304, което е 40,97%, показвано като 41%.

Ограничения на този минификатор

Този инструмент премахва само коментари и празни пространства. За разлика от инструменти за етапа на изграждане като Terser или UglifyJS, той не преименува променливи, не изтрива неизползван код и не обединява файлове. Тези инструменти обикновено създават по-малък резултат, но изискват процес на изграждане, за да работят. Този инструмент работи незабавно в браузъра без настройка, което го прави подходящ за бързи проверки или малки откъси, а не за цялостен производствен процес.

Често задавани въпроси

Какво премахва минификаторът на JavaScript?

Той премахва коментари и празни пространства, които не са нужни за изпълнението на кода. Не премахва точки и запетаи, скоби или други символи, които вече са били част от кода.

Променя ли минифицирането на JavaScript начина, по който кодът се изпълнява?

Не. Минифицираният код трябва да дава същите резултати като оригинала. Променя се само форматирането.

Защо минифицираният код понякога все още съдържа нови редове?

Нов ред може да е необходим заради правилото за автоматично вмъкване на точка и запетая в JavaScript или да следва затваряща скоба }. Премахването му би могло да промени поведението на кода, затова инструментът оставя един нов ред на тези места, вместо да го изтрие.

Минифицирането същото ли е като компресирането?

Не. Минифицирането премахва символи от самия изходен код. Компресирането, например с gzip или Brotli, кодира файла по различен начин за пренос през мрежа. Уебсайтовете обикновено използват и двете заедно.

Изпраща ли се кодът ми към сървър?

Самият минификатор работи изцяло в раздела на браузъра и кодът не се качва за минифициране. Поставеният код се съхранява в адреса на страницата, за да може резултатът да бъде споделян или добавян в отметки, затова се появява в адресната лента и в историята на браузъра.

Може ли минифицираният код да бъде върнат до оригиналния?

Празните пространства могат да бъдат възстановени с форматиращ инструмент за код, но коментарите и първоначалните имена на променливите и функциите са изгубени, освен ако не е запазена отделна карта на изходния код.

Източници

  1. MDN Web Docs. "Minification." Глосар на MDN, https://developer.mozilla.org/en-US/docs/Glossary/Minification
  2. ECMA International. "ECMAScript Language Specification," раздел 12,10, "Automatic Semicolon Insertion." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
  3. ECMA International. "ECMAScript Language Specification," раздел 12.7.1, "Identifier Names." https://tc39.es/ecma262/#sec-names-and-keywords
  4. ECMA International. "ECMAScript Language Specification," раздел 22.2.6, "Properties of the RegExp Prototype Object" (наборът от флагове d g i m s u v y). https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object