Softonic

Минифайер JavaScript

Шаг 1 / 3
Далее

Вставьте код на 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 КБ

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

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

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

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

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

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

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

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

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

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

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

Да, включите опцию «сгенерировать карту исходного кода», инструмент вернёт минифицированный код вместе с файлом .map, который сопоставляет каждый байт с исходным кодом. Загрузите оба файла на ваш CDN, чтобы DevTools показывали читаемые трассировки стека.

Да, поддерживаются top-level await, поля классов, приватные методы, нулевое слияние (nullish coalescing), опциональная цепочка (optional chaining) и числовые разделители. Для совсем новых предложений (декораторы на stage-3) проверьте соответствующий флаг.

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

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Шпаргалка по Markdown

Практический справочник Markdown с настоящим предпросмотром и готовыми для копирования примерами заголовков, списков, таблиц, кода, ссылок, изображений и синтаксиса GFM.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Шпаргалка по регулярным выражениям

Поисковый справочник регулярных выражений для JavaScript, PCRE2/PHP, Python re и .NET. Сравнивайте токены, синтаксис движков, якоря, группы, проверки и флаги.

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