Softonic

Минифайер JavaScript

Шаг 1 / 3

Вставьте скрипт или ES-модуль длиной до 1 000 000 символов или откройте файл .js.

Далее: выбрать параметры

Вставьте код на JavaScript и получите минифицированную версию на 40–70 % меньше: удалены пробелы, переменные сокращены до одной буквы, вырезаны мёртвые ветви, свёрнуты константы, а комментарии (если вы включите эту опцию) удалены. Удобно для быстрой проверки размера, разовых встроек и лендингов, где вы не запускаете полноценную сборочную цепочку.

Как минимизировать JavaScript

  1. 1

    Вставьте источник

    Любой действительный код на JavaScript версии ES5+ или более поздних. Для версий ES6 и выше (литералы шаблонов, классы, модули) убедитесь, что используемая версия соответствует требованиям.

  2. 2

    Выберите уровень минификации

    Безопасный (пробелы + комментарии); стандартный (+ переименование переменных); агрессивный (+ манглинг имён свойств, что может нарушить доступ к DOM).

  3. 3

    Сократить размер

    Инструмент выполняет преобразование, совместимое с Terser, и выводит результат с указанием количества байтов до и после обработки.

  4. 4

    Копировать или скачать

    Вставьте результат в тег `<script>` или сохраните его под названием `.min.js` для доставки через ваш CDN.

Куда уходят байты

Типичный минифицированный файл на 40–70 % меньше исходного. Сжатие его с помощью gzip (или Brotli, алгоритма, который используют Cloudflare и большинство CDN) уменьшает размер ещё на 60–75 %. В сумме исходник на 100 КБ можно передать по сети как ~15–25 КБ.

Источник Минифицировано +gzip +Brotli
jQuery 3.6 87 КБ 30 КБ 27 КБ
Lodash 4.17 71 КБ 25 КБ 22 КБ
React + ReactDOM 18 140 КБ 44 КБ 39 КБ

Применяемые приёмы

Приём Что делает
Удаление пробелов Убирает пробелы, табуляции и переводы строк
Удаление комментариев Удаляет // и /* */ (комментарии с лицензией, например /*!, можно сохранить)
Манглинг имён переменных Переименовывает userName в u (безопасно по области видимости)
Манглинг имён свойств Переименовывает obj.foo в obj.a (НЕБЕЗОПАСНО)
Свёртка констант 1 + 2 + 3 → 6
Удаление мёртвого кода Удаляет ветви после return
Встраивание потока управления Встраивает крошечные функции, используемые один раз
Последовательности и булевы значения a(); b(); → a(),b();, true → !0

Безопасный режим против агрессивного

  • Безопасный сохраняет имена переменных и удаляет только пробелы и комментарии. Хорош для отладки, когда нужны читаемые трассировки стека.
  • Стандартный манглит локальные переменные, но сохраняет глобальные имена и имена свойств. Работает с большинством кода.
  • Агрессивный манглит всё, включая имена свойств. Он часто ломает код, который обращается к свойствам динамически (obj[key], Object.keys(obj)), если вы не настроили зарезервированные имена.

Когда минифицировать, а когда нет

  • Минифицируйте в продакшене каждый ресурс, который загружает браузер.
  • Поставляйте карту исходного кода (source map), чтобы DevTools браузера по-прежнему показывали исходные имена при отладке.
  • Не минифицируйте код при разработке, вы тратите время сборки и теряете читаемые ошибки.
  • Не минифицируйте уже минифицированный код. Файлы .min.js при повторной минификации сжимаются всего на ~1–3 %, но рискуют сломаться.

Частые ошибки

  • Не настроены зарезервированные имена. Динамический доступ к свойствам (obj["payment_" + type]) ломается, когда payment_method манглится в a.
  • Забыли про карты исходного кода. Без файлов .map ошибки в продакшене нечитаемы.
  • Минификация CommonJS и ESM вместе. Смешанные системы модулей требуют тщательного tree-shaking перед минификацией.

Часто задаваемые вопросы

Обычно без сжатия размер уменьшается на 40–70 %, а при сжатии gzip или Brotli, ещё на 60–75 %. Исходник размером 100 КБ часто передаётся по сети как ~15–25 КБ.

Стандартный манглинг (локальных переменных) почти всегда безопасен. Агрессивный манглинг имён свойств ломает любой код, который динамически обращается к свойствам. Тщательно настройте список reserved, прежде чем включать его.

Да. Отметьте «Также создать карту кода (source map)», и вместе с минифицированным кодом вы получите файл .map. Он связывает минифицированный код с исходными строками и именами, поэтому DevTools в браузере показывают читаемый код и трассировки стека. Размещайте оба файла в одной папке: минифицированный код заканчивается комментарием //# sourceMappingURL=, который находит карту по имени файла. Карта содержит ваш исходный код, поэтому публикуйте её только там, где этот код может прочитать кто угодно.

Да. Поддерживаются await верхнего уровня (в ES-модулях), поля классов, приватные методы, оператор ?? (nullish coalescing), опциональная цепочка (optional chaining) и числовые разделители. Декораторы не поддерживаются: сначала скомпилируйте их в обычный JavaScript, как и TypeScript или JSX. Минификатор никогда не переводит новый синтаксис в более старую версию: параметр «Версия ECMAScript» задаёт только самый новый синтаксис, который минифицированный код может использовать ради экономии байтов.

Нет. Код, который вы вставляете или открываете, минифицируется в вашем браузере. Он не отправляется на наши серверы и не добавляется в ссылку на страницу. Между шагами он хранится в хранилище сеанса этой вкладки, которое браузер очищает при её закрытии.

Сопутствующие инструменты

Смешивание цветов

Смешайте два HEX-цвета в 2-20 равномерных образцов. Каждый промежуточный цвет показывается как HEX-код в верхнем регистре, включая оба края.

Генератор вымышленных телефонных номеров

Создавайте до 50 вымышленных номеров из официально зарезервированных диапазонов пяти стран.

Генератор конфигурации webpack

Создайте webpack.config.js для webpack 5 по короткой форме: задайте entry, папку вывода и режим, затем включите TypeScript, Babel, загрузчик CSS, HtmlWebpackPlugin и сервер разработки.

Генератор бейджей README

Создавайте бейджи shields.io для файлов README на GitHub: статус сборки, версия, лицензия, число загрузок и покрытие кода. Просмотрите и скопируйте фрагмент Markdown.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Генератор случайных адресов

Создавайте 1–20 похожих на адрес записей для макетов и тестов в трёх упрощённых форматах.

Инструмент доступен на других языках