Минификатор JavaScript
Сжимайте файлы JavaScript и смотрите, сколько именно вы сэкономили.
Работает в браузере. То, что вы вводите, никуда не отправляется.
- Сокращает имена переменных
- Показывает экономию в байтах
- Ничего не загружается
Как минифицировать JavaScript
- Вставьте свой JavaScript.
- Отключите "Сжать" или "Сокращать имена переменных", если их нужно оставить читаемыми.
- Скопируйте или скачайте минифицированный файл.
Что делают "Сжать" и "Сокращать имена переменных"
| Опция | Что она делает |
|---|---|
| Сжать | Убирает мёртвый код и упрощает выражения |
| Сокращать имена переменных | Переименовывает локальные переменные в короткие имена вроде a, b и c |
Что остаётся неизменным в любом случае
- Публичное поведение: те же входные данные по-прежнему дают те же результаты.
- Каждая строка в коде, включая любой текст, показываемый пользователям.
- Порядок выполнения операций.
- Комментарий вида /*! ... */, ведь Terser по умолчанию сохраняет такой стиль, а это соглашение, которое многие библиотеки используют для лицензионных баннеров.
Советы по минификации JavaScript
- Храните неминифицированную копию или создавайте source map в инструменте сборки, чтобы ошибки в продакшене оставались читаемыми.
- Отключайте "Сокращать имена переменных" для библиотеки, которую будут читать другие разработчики, чтобы сообщения об ошибках сохраняли осмысленные имена.
- Прогоняйте тесты на минифицированном результате перед развёртыванием, ведь редкий крайний случай в минификаторе всё ещё возможен, даже если этот широко используется.
Частые вопросы о Минификатор JavaScript
Минифицированный JavaScript остаётся корректным кодом?
Да. Он выполняется точно так же, как исходный, только с более короткими именами и без лишних пробелов.
Насколько обычно уменьшается JavaScript?
Часто на 30-60%, в зависимости от того, сколько комментариев и длинных имён переменных было в исходнике.
Что будет, если в моём коде синтаксическая ошибка?
Ошибка покажется со строкой и столбцом, где она произошла, чтобы вы могли исправить её и попробовать снова.
В чём разница между "Сжать" и "Сокращать имена переменных"?
"Сжать" переписывает код, убирая мёртвые ветки и упрощая выражения. "Сокращать имена переменных" переименовывает локальные переменные в отдельные буквы. Каждую опцию можно отключить по отдельности.
Это может минифицировать современный синтаксис вроде async и стрелочных функций?
Да, включая синтаксис ES2020 и новее, например опциональную цепочку или async и await.
Какой минификатор здесь используется?
Terser, стандартный преемник UglifyJS и минификатор, который по умолчанию используют большинство сборщиков, включая webpack, Rollup и esbuild.
Может ли минификация сломать мой код?
Она не должна менять поведение обычного кода. Код, который читает исходное имя функции или переменной во время выполнения, например через нестандартные приёмы интроспекции, может сломаться после сокращения имён. Отключите "Сокращать имена переменных", если это ваш случай.
Поддерживается ли синтаксис TypeScript?
Нет, ожидается обычный JavaScript. Аннотации типов TypeScript не являются корректным JavaScript и вызовут здесь синтаксическую ошибку, поэтому сначала скомпилируйте TypeScript в JavaScript.