Минифицировать JavaScript _

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

Terser работает в четыре стадии над абстрактным синтаксическим деревом вашего кода. Каждая стадия независима, поэтому любую из них можно включить или выключить, не нарушая остальные.

1. Разбор. Terser разбирает ваш JavaScript в AST. Любая синтаксическая ошибка всплывает здесь — с токеном и строкой, которые её вызвали, — так что вы находите реальную проблему до запуска каких-либо преобразований. Парсер принимает все стандартные конструкции ECMAScript вплоть до последних предложений четвёртой стадии.
2. Сжатие. Компрессор обходит AST и применяет десятки сохраняющих семантику преобразований: свёртка констант, устранение мёртвых ветвей, инлайн коротких чистых функций, сворачивание последовательных деклараций var и переписывание эквивалентных форм операторов (if/else в тернары, сокращение цепочек сравнений, сворачивание условных возвратов). Каждое преобразование в принципе обратимо; компрессор никогда не изменяет наблюдаемое поведение.
3. Маглинг. Мангер переименовывает локальные привязки в кратчайшие уникальные идентификаторы (a, b, c, …) в пределах каждой области видимости. Переименовываются только имена, которые не могут выйти за границу модуля, поэтому экспортируемые привязки, ключи свойств и глобальные ссылки остаются нетронутыми. Именно этот этап даёт наибольшую экономию байтов.
4. Вывод. Terser печатает преобразованное AST обратно в строку JavaScript со свёрнутыми пробелами и разделителями операторов, сведёнными к минимуму, который принимает грамматика. Комментарии удаляются, если только переключатель сохранения лицензий не оставляет блоки /*! … */, которые большинство CDN-лицензий требует сохранять.

Зачем минифицировать JavaScript

• Более быстрая загрузка страниц. Меньшие скрипты разбираются и выполняются быстрее. При мобильном соединении 4G сокращение на 40% экономит реальные секунды до Time to Interactive — именно этот показатель Google PageSpeed Insights измеряет наиболее активно.
• Меньше расходов на CDN egress. CloudFront, Cloudflare и Fastly берут плату за гигабайт исходящего трафика. Сокращение скрипта на 40% при миллионах просмотров в месяц складывается в реальную экономию ещё до оптимизации изображений или CSS. Математика работает даже с учётом gzip и brotli — минификация удаляет токены, которые иначе пришлось бы кодировать компрессору.
• Этот минификатор не нагружает вашу страницу. Terser занимает ~1 МБ в несжатом виде. Большинство онлайн-минификаторов загружают всю библиотеку при открытии страницы, что обрушивает их собственный показатель Lighthouse и делает страницу вялой ещё до того, как пользователь что-то напечатает. Эта страница загружает Terser лениво — только когда вы нажимаете «Минифицировать» или включаете живой режим, — поэтому начальный рендеринг остаётся в рамках порогов Core Web Vitals, которые инструмент обещает помочь вам достичь.
• Прохождение Core Web Vitals. Lighthouse и PageSpeed Insights отмечают большой JavaScript как прямую причину плохого Total Blocking Time. Минификация вендорных библиотек и бандлов приложений — быстрейший выигрыш в аудитах Lighthouse «Сократите неиспользуемый JavaScript» и «Удалите дублирующиеся модули» — обычно разовое сокращение стоит десяти-двадцати баллов.

Типичные применения

Минификация JavaScript присутствует почти на каждом этапе современного веб-проекта.

• Хуки pre-commit: минифицируйте отдельные утилитарные скрипты перед коммитом в репозиторий, чтобы зафиксированный артефакт был готов к продакшену, а diff отражал логические изменения, а не пробельный шум.
• Аудит сторонних виджетов: вставьте сниппет для встраивания от вендора и проверьте, уже ли он минифицирован или может быть сжат дополнительно перед обслуживанием миллионам пользователей.
• Очистка устаревших скриптов: сжимайте старые jQuery-плагины и написанные вручную скрипты, созданные до вашего текущего пайплайна сборки, не затрагивая исходное дерево.

Практический пример

Возьмём небольшую функцию: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — около 130 байт с учётом комментария. Вставьте её выше при включённых маглинге и сжатии. Вывод сократится примерно до function add(n,o){return n+o}console.log(add(1,2)); — около 55 байт, сокращение на 58%. Имя функции add сохраняется, поскольку на него есть ссылка в вызове console.log; имена параметров firstNumber и secondNumber сокращаются до одной буквы, так как они локальны для тела функции. Отключите маглинг, чтобы сохранить читаемые имена параметров и при этом всё равно свернуть пробелы и убрать комментарий.

FAQ

Это работает в моём браузере?

Да. Terser загружается лениво при первом нажатии «Минифицировать» или включении живого режима — около 200 КБ сжатых попадает в кэш браузера, после чего ничего больше не скачивается. Ваш код никогда не покидает страницу.

Что такое маглинг имён и безопасен ли он?

Маглинг переименовывает локальные переменные в одну букву для экономии байтов. Это безопасно для самодостаточных скриптов и IIFE-бандлов, так как переименования никогда не выходят за пределы области видимости. Небезопасно для скриптов, которые открывают глобальные переменные по имени (например, window.myLib = …) без обёртки. Отключайте маглинг, если сомневаетесь.

Почему мой код сломался после минификации?

Три обычных подозреваемых: eval или with, обращающиеся к переменным по строке; чтения Function.name или arguments.callee, зависящие от исходного идентификатора; глобальные переменные, открытые по имени, которое было переименовано. Сначала отключите маглинг, чтобы понять, в чём причина — в переименовании или в преобразовании сжатия.

Поддерживается ли современный синтаксис (ES2020+)?

Да. Установите целевой стандарт ECMAScript ES2020 или Next — и Terser сохранит опциональные цепочки, нулевое слияние, await на верхнем уровне и операторы логического присваивания. Установите ES5 — и Terser понизит версию там, где может, но это не полный транспилятор: используйте Babel для синтаксиса, который ES5 вообще не поддерживает.

Браузерная минификация JavaScript с Terser даёт вывод продакшн-качества без добавления инструмента сборки. Вставьте скрипт, выберите целевой стандарт ECMAScript, скопируйте или скачайте результат. Ничего не загружается, без аккаунта, без пайплайна. Сам минификатор загружается только по требованию — так что открытие этой страницы стоит вам несколько килобайт, а не мегабайт.