Мініфікатор і форматер JavaScript

Що це за інструмент?

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

Цей інструмент побудований на Terser, AST-мініфікаторі, який використовують webpack, Vite, Rollup і більшість сучасних інструментів збірки JavaScript. Оскільки він справді розбирає ваш код, а не зіставляє текст за шаблонами, він коректно відрізняє оператор ділення від літералу регулярного виразу, не ламає шаблонні рядки, що містять послідовності, схожі на //, і не перейменує змінну на ім'я, яке конфліктує з чимось у зовнішній області видимості.

Навіщо його використовувати?

• Мініфікація на основі AST (Terser), той самий рушій, що використовують основні бандлери — безпечний для регулярних виразів, шаблонних рядків і замикань.
• Скорочує імена змінних для реальної економії розміру, а не лише видалення пробілів.
• Точно бачите, скільки байтів і у скільки відсотків ви заощадили.
• Режим форматування перетворює обфускований, однорядковий мініфікований JS назад у читабельний код із відступами — корисно для розуміння сторонніх скриптів.
• 100% локальна обробка — власницький код ніколи не залишає ваш браузер.

Як користуватися

1. Вставте свій JavaScript у поле вводу або натисніть "Завантажити приклад", щоб спробувати зразок із регулярним виразом і шаблонним рядком.
2. Натисніть "Мініфікувати", щоб стиснути його, або "Форматувати", щоб зробити читабельним із відступом у 2 пробіли.
3. Перевірте повідомлення під полями — режим мініфікації показує зменшення розміру; синтаксична помилка у вашому коді показує чітке повідомлення замість тихого створення зламаного результату.
4. Натисніть "Копіювати", щоб отримати результат.

Приклад

Введення

function greet(name) {
  const pattern = /^[a-z]+$/i;
  const msg = `Hello, ${name}!`;
  if (pattern.test(name)) {
    // просте перевірення
    return msg;
  }
  return "Hi there";
}

Результат

function greet(n){const e=/^[a-z]+$/i,g=`Hello, ${n}!`;return e.test(n)?g:"Hi there"}

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

Практичні поради

• Мініфікуйте під час збірки, а не редагуючи вручну — тримайте читабельний вихідний код під контролем версій і генеруйте мініфікований бандл як крок збірки.
• Якщо мініфікований результат поводиться несподівано, перевірте код, що покладається на Function.prototype.name чи рефлексію — скорочення імен перейменовує функції, і це може проявитися в рідкісних крайових випадках.
• Форматування стороннього скрипту перед читанням набагато швидше, ніж намагатися розібрати єдиний рядок на 2000 символів.
• Поєднуйте з мініфікаторами HTML та CSS нижче, якщо готуєте повний статичний пакет для розгортання.

Де це знадобиться в реальних завданнях

JavaScript зазвичай є найбільшим ресурсом, що блокує рендеринг чи парсинг на сторінці, тож його мініфікація має реальний, вимірний вплив на час завантаження — більший, ніж HTML чи CSS у розрахунку байт до байта. Більшість сучасних фреймворків роблять це автоматично під час збірки, але написані вручну скрипти, розширення браузера та букмарклети часто постачаються немініфікованими, доки хтось не прожене їх через такий інструмент, як цей.

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

→ Мініфікатор HTML · CSS Мінімізатор

Поширені випадки використання

• Зменшення автономного скрипту чи букмарклету перед публікацією.
• Переформатування мініфікованого скрипту, взятого з живого сайту, щоб зрозуміти, що він робить.
• Прибирання JavaScript, вставленого з форуму чи згенерованого ШІ фрагмента, перед уважним читанням.
• Швидка перевірка, чи має написаний вручну JS-фрагмент синтаксичну помилку, оскільки збій парсингу проявляється як явне повідомлення.

Часті запитання