Минификатор кода онлайн — сжать HTML, CSS, JavaScript и JSON

Пробелы, комментарии, длинные имена

Во всех языках удаляются комментарии, отступы и переносы строк. Минификатор CSS дополнительно сокращает значения (#ffffff → #fff, 0px → 0) и объединяет повторяющиеся правила. Минификатор JavaScript сокращает имена локальных переменных и упрощает выражения. Логика кода при этом не меняется.

Две ступени, а не замена друг другу

Минификация делается один раз, до публикации. Gzip или Brotli сжимают файл на сервере при каждой отдаче. Эффект складывается: bootstrap.js весит 28,9 КБ в gzip, а после минификации и gzip — 16,1 КБ. Поэтому инструмент показывает оба размера. Настроить gzip на сервере поможет генератор .htaccess.

Что говорит Lighthouse

В отчёте PageSpeed Insights есть проверки «Minify CSS» и «Minify JavaScript». Это диагностика: на итоговую оценку производительности она не влияет, но показывает, сколько килобайт можно сэкономить. Реальный выигрыш получается за счёт скорости загрузки (документация Lighthouse).

Минифицированный код не защищён

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

Terser 5.51.2 — тот же, что в webpack

Terser разбирает код в синтаксическое дерево и собирает обратно. По умолчанию его использует webpack 5 в режиме production. Сокращаются только имена внутри функций. Функции и переменные верхнего уровня сохраняют имена, поэтому вызовы из onclick и других файлов продолжают работать. Модули с import и export распознаются автоматически.

Сокращение имён ломает код, который читает имена параметров. Классический пример — AngularJS 1.x без строгого внедрения зависимостей: для него снимите галочку. Если код использует fn.name или constructor.name, включите «Сохранять имена функций и классов». «Удалять console» убирает log, info и debug, а warn и error оставляет.

CSSO 5.0.5 с защитой современного синтаксиса

CSSO объединяет одинаковые селекторы и сокращает значения. Но у него есть ограничение, которое мы нашли при проверке: вложенность CSS (& .b {}) и диапазоны в @media (width > 600px) он не понимает и такие блоки молча удаляет. Поэтому инструмент сначала проверяет код парсером. Если есть непонятые конструкции, он сжимает код бережно: удаляет только комментарии и пробелы, не меняя правил, и показывает номер строки.

Без склеенных слов и сломанной вёрстки

Пробел между словами в соседних тегах, например <b>а</b> <i>б</i>, сохраняется, а между блочными тегами удаляется. Содержимое pre и textarea не трогается. Встроенные <style>, <script> и JSON-LD сжимаются теми же CSSO, Terser и парсером JSON. Шаблоны вроде type="text/template", условные комментарии <!--[if IE]> и DOCTYPE остаются как были: замена старого DOCTYPE переключила бы режим отображения страницы.

Проверка синтаксиса и исходная кодировка

JSON разбирается встроенным парсером браузера. Лишняя запятая или одинарные кавычки дают сообщение с номером строки, и курсор встаёт на ошибку. Файлы можно открыть кнопкой или перетащить на поле. Файл в Windows-1251 читается без «кракозябр» и скачивается в той же кодировке под исходным именем с суффиксом .min.