Перейти до вмісту
🛠️
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. Виберіть «Мініфікувати».
  3. Перегляньте результат у полі виведення разом з початковим розміром, розміром після мініфікації та відсотком скорочення.
  4. Виберіть «Копіювати», щоб скопіювати мініфікований код.

Мініфікація виконується у вкладці браузера, тому код нікуди не завантажується для обробки. Інструмент також копіює вставлений код в адресу сторінки, завдяки чому результат легко додати до закладок або поширити. Отже, кожен, хто бачить цю адресу, може побачити код.

Приклад: мініфікація функції

До:

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