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

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

Минификация уменьшает размер JavaScript, не меняя того, что делает код. Этот инструмент использует Terser — зрелый минификатор, который разбирает ваш код в абстрактное синтаксическое дерево, преобразует его и снова выводит код без лишних пробелов и комментариев. Этап compress применяет десятки оптимизаций: удаляет недостижимый код и неиспользуемые переменные, подставляет константы, объединяет идущие подряд объявления переменных, где возможно, превращает инструкции if в более короткие условные выражения и заранее вычисляет простые константные выражения. Затем этап mangle переименовывает локальные переменные, параметры и имена функций в одну-две буквы. Имена свойств и глобальные переменные не затрагиваются, поэтому публичное поведение вашего кода остаётся прежним.

Индикаторы размера показывают объём входных и выходных данных в байтах UTF-8 и процент экономии. Типичный код, написанный вручную, уменьшается на 40–70%; код, который уже компактен или состоит в основном из длинных строк, сожмётся меньше. Учтите, что серверы обычно дополнительно сжимают JavaScript с помощью gzip или Brotli, поэтому реальная экономия при передаче меньше «сырого» значения, но минифицированный код всё равно быстрее разбирается и расходует меньше трафика.

Как выбрать правильные параметры

Параметр ECMAScript target сообщает Terser, какой синтаксис можно использовать в результате. С ES2020 он может генерировать стрелочные функции, optional chaining и другие современные конструкции; с ES5 он не добавляет более новый синтаксис, но и не транспилирует современный код, который вы написали сами, — для этого используйте инструмент вроде Babel или esbuild. Keep console.* сохраняет логирование, что удобно для staging-сборок. Включите ES module для файлов, использующих import/export; это также позволяет сокращать имена верхнего уровня, поскольку область видимости модуля приватна.

Конфиденциальность по умолчанию

Минификатор загружается только по необходимости и работает локально, поэтому ваш исходный код никуда не отправляется. Это делает его удобным для быстрых разовых задач, например чтобы уменьшить встроенный скрипт, букмарклет или фрагмент кода для стороннего менеджера тегов. Если Terser сообщает о синтаксической ошибке, в сообщении указаны строка и столбец, чтобы вы могли исправить входные данные. Для продакшн-бандлов оставляйте минификацию в своём конвейере сборки, чтобы результат был воспроизводимым, и генерируйте source maps для отладки.