Минификатор и форматтер JavaScript

Что это за инструмент?

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

Этот инструмент построен на Terser — минификаторе на основе AST, который используют webpack, Vite, Rollup и большинство современных инструментов сборки JavaScript. Поскольку он действительно разбирает ваш код, а не сопоставляет текстовые шаблоны, он корректно отличает оператор деления от литерала регулярного выражения, не ломает шаблонные строки, содержащие последовательности, похожие на //, и не переименовывает переменную в имя, конфликтующее с чем-то во внешней области видимости.

Зачем его использовать?

• Минификация на основе AST (Terser) — тот же движок, что используют основные бандлеры — безопасна с регулярными выражениями, шаблонными строками и замыканиями.
• Сокращает имена переменных для реальной экономии размера, а не просто удаляет пробелы.
• Видите точное количество сэкономленных байт и процентов.
• Режим форматирования превращает обфусцированный однострочный минифицированный JS обратно в читаемый, отступленный код — полезно для понимания сторонних скриптов.
• 100% локальная обработка — проприетарный код никогда не покидает ваш браузер.

Как использовать

1. Вставьте свой JavaScript в поле ввода или нажмите «Загрузить пример», чтобы попробовать образец с литералом регулярного выражения и шаблонной строкой.
2. Нажмите «Минифицировать», чтобы сжать код, или «Форматировать», чтобы привести его в порядок с отступом в 2 пробела.
3. Проверьте сообщение под полями — режим минификации показывает уменьшение размера; синтаксическая ошибка в вашем коде покажет понятное сообщение вместо тихого создания сломанного результата.
4. Нажмите «Копировать», чтобы получить результат.

Пример

Ввод

function greet(name) {
  const pattern = /^[a-z]+$/i;
  const msg = `Hello, ${name}!`;
  if (pattern.test(name)) {
    // simple check
    return msg;
  }
  return "Hi there";
}

Результат

function greet(n){const e=/^[a-z]+$/i,g=`Hello, ${n}!`;return e.test(n)?g:"Hi there"}

Имена переменных сокращены, комментарий и оператор if свёрнуты в выражение, но литерал регулярного выражения и шаблонная строка сохранены в точности, а поведение не меняется.

Практические советы

• Минифицируйте на этапе сборки, а не вручную — храните читаемый исходник в системе контроля версий и генерируйте минифицированный бандл как шаг сборки.
• Если минифицированный результат ведёт себя неожиданно, проверьте код, полагающийся на Function.prototype.name или рефлексию — сокращение имён переименовывает функции, что может проявиться в редких граничных случаях.
• Форматирование стороннего скрипта перед чтением намного быстрее, чем попытка разобрать одну строку из 2000 символов.
• Комбинируйте с минификаторами HTML и CSS ниже, если готовите полный статический бандл для развёртывания.

Где это применяется в реальных рабочих процессах

JavaScript обычно является самым крупным ресурсом, блокирующим рендеринг или разбор страницы, поэтому его минификация даёт реальный, измеримый эффект на время загрузки — больше, чем HTML или CSS в пересчёте байт на байт. Большинство современных фреймворков делают это автоматически на этапе сборки, но вручную написанные скрипты, расширения браузера и букмарклеты часто поставляются неминифицированными, если кто-то не прогонит их через подобный инструмент.

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

→ Минификатор HTML · Минификатор CSS

Типичные сценарии использования

• Сократить отдельный скрипт или букмарклет перед публикацией.
• Переформатировать минифицированный скрипт с боевого сайта, чтобы понять, что он делает.
• Очистить JavaScript, вставленный из сообщения на форуме или сгенерированный ИИ, перед внимательным чтением.
• Быстро проверить, нет ли синтаксической ошибки во вручную написанном JS-фрагменте, поскольку ошибка разбора отображается как явное сообщение.

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