IZN Tools

Минификация JavaScript

Быстро прикинуть вес сниппета перед отправкой в прод.

ВВОД
РЕЗУЛЬТАТ
Ожидание ввода
Посчитано на вашем устройстве

Куда деваются байты

Главное здесь — переименование. Функция, полная userAccountBalance, превращается в функцию, полную a, и экономия умножается на каждое упоминание. Удаление комментариев и пробелов — видимая, но меньшая часть.

Третья составляющая — переписывание выражений: if (a) { b() } в a&&b(), true в !0. Это стоит нескольких процентов и объясняет, почему минификатор обязан разбирать код, а не искать шаблоны.

Что переименовать нельзя

Всё, до чего можно дотянуться извне файла: экспортируемые имена, глобальные функции, свойства объектов, к которым обращаются строкой. Terser здесь по умолчанию осторожен, потому что ошибка означает не файл побольше, а ошибку во время выполнения.

Код с eval или with полностью ломает анализ: оба позволяют собрать имя во время выполнения, поэтому безопасно переименовать нельзя ничего.

Мерьте после сжатия

Минифицированный JavaScript всё ещё сжимается. Сообщать только размер после минификации — значит преувеличивать выигрыш, потому что gzip и сам убрал бы большую часть той же избыточности. Если решаете, нужен ли шаг сборки, сравнивайте сжатые размеры.

Вопросы

Что на самом деле делает минификация?+

Три вещи: убирает пробелы и комментарии, переименовывает локальные переменные в односимвольные и переписывает часть выражений в более короткие эквиваленты. Первое косметическое, второе даёт основную экономию, а третье — причина, по которой минификатору нужно понимать код, а не текст.

Это безопасно?+

Для обычного кода — да: Terser переименовывает только те идентификаторы, локальность которых может доказать. Ломается на коде, который обращается к именам строкой: eval, with и всё, что ищет по имени свойства так, что сборщик этого не видит. Такое встречается редко и его в любом случае стоит избегать.

Сравнивать ли с выводом моего сборщика?+

Ваш сборщик почти наверняка уже запускает Terser или эквивалент, так что цифры должны быть близки. Эта страница — для отдельного фрагмента: инлайнового скрипта, букмарклета, тега, который вы вставляете на чужой сайт.

А как же gzip?+

Мерьте после сжатия, а не до. Минификация и gzip пересекаются — оба эксплуатируют повторы, — поэтому экономия в 40% до сжатия может обернуться 15% после. Несжатая цифра льстит результату.