Минификация / Форматирование

Минифицируйте или форматируйте код. Всё остаётся в вашем браузере.

Как работает Минификация / Форматирование

Минификация и форматирование кода сжимают HTML, CSS и JavaScript, удаляя комментарии, лишние пробелы и избыточные символы, или раскрывают минифицированный код в читаемую форму с отступами. Вся обработка происходит в браузере с использованием встроенных парсеров; ничто из вставленного не передаётся никуда. Ничто из введённого не покидает устройство.

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

Автор: Bastien Sulyan

Минификация / Форматирование: пошаговая инструкция

Вставьте HTML, CSS или JavaScript код в поле ввода.
Выберите тип языка из выпадающего списка (HTML, CSS или JavaScript).
Нажмите «Минифицировать» для получения сжатой версии или «Форматировать» для раскрытия и форматирования кода с отступами.
Скопируйте результат из поля вывода с помощью кнопки копирования.
Вставьте другой код и повторите при необходимости.

Частые сценарии использования

Фронтенд-разработчик хочет минифицировать критический фрагмент CSS для встраивания в тег head HTML для производительности выше сгиба.
Разработчик получает минифицированный сторонний скрипт и хочет отформатировать его для понимания логики в ходе аудита безопасности.
Технический писатель хочет отформатированную версию минифицированного тега скрипта JSON-LD для включения в документацию.
Веб-разработчик проверяет экономию байтов от минификации CSS-файла, прежде чем решить, добавлять ли шаг сборки.

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

Отправляется ли вставленный код на сервер для минификации?

Нет. Минификация и форматирование выполняются собственным кодом страницы, написанным специально для этого инструмента, а не взятым из стороннего минификатора. Вся обработка остаётся в вкладке браузера. Ничто из вставленного здесь не передаётся в Sunasty или третьим сторонам.

Сохраняет ли минификация JavaScript исходное поведение кода?

Хороший минификатор сохраняет поведение, только удаляя пробелы, сокращая имена переменных в контролируемой области видимости и убирая комментарии. Этот инструмент нацелен на безопасные преобразования. Агрессивные оптимизации, такие как устранение мёртвого кода или инлайнинг функций, как правило, не применяются, поскольку они требуют полного анализа программы.

Можно ли минифицировать код, а затем форматировать результат для проверки?

Да. Сначала минифицируйте код, затем вставьте минифицированный вывод обратно в поле ввода и нажмите «Форматировать». Форматированная версия будет отличаться от исходного кода (имена переменных могут быть сокращены, комментарии удалены), но будет структурно эквивалентной.

Удаляет ли минификация HTML все комментарии?

Инструмент удаляет стандартные HTML-комментарии () при минификации. Условные комментарии, используемые старыми версиями IE (), всегда сохраняются, поэтому удаление комментариев не может нарушить устаревшее поведение, которое от них зависит.

Есть ли ограничение по размеру минифицируемого кода?

Ограничение задаётся доступной памятью вкладки браузера. Код до нескольких сотен килобайт обрабатывается быстро. Для больших JavaScript-бандлов (мегабайты) специализированный инструмент сборки, такой как esbuild, Terser или Lightning CSS, работает быстрее и больше подходит для производственного использования.