Меньшие файлы для продакшена, читаемый код для отладки
Этот минификатор сжимает CSS, JavaScript и HTML для продакшена и точно показывает, сколько вы сэкономили: исходный размер, размер после минификации и размер после gzip — именно столько на самом деле скачивают ваши посетители. JavaScript минифицируется с помощью terser, который используют большинство современных инструментов сборки, а CSS — с помощью csso, который ещё и объединяет повторяющиеся правила. Переключитесь в режим «Форматировать», чтобы превратить минифицированный бандл или таблицу стилей обратно в читаемый код с отступами. Код обрабатывается в вашем браузере и никуда не загружается.
Как минифицировать или отформатировать код
- 1Выберите язык: CSS, JavaScript или HTML. Если перетащить в поле ввода файл
.css,.jsили.html, язык выберется сам. - 2Выберите Минифицировать, чтобы сжать код, или Форматировать, чтобы сделать его читаемым.
- 3Настройте параметры: для JavaScript — сокращать ли имена и сжимать ли код; для CSS — перестраивать ли правила; для HTML — минифицировать ли встроенные стили и скрипты. Лицензионные комментарии сохраняются, если вы это не отключите.
- 4Посмотрите размеры под результатом, чтобы увидеть экономию до и после gzip.
- 5Скопируйте результат или скачайте его как
.min.js,.min.cssили.html.
Что делает минификация
Минификация удаляет всё, что браузеру не нужно для выполнения кода: комментарии, отступы, переносы строк и необязательные точки с запятой. Хорошие минификаторы идут дальше. terser переименовывает локальные переменные в однобуквенные (mangling), удаляет недостижимый код, заранее вычисляет константные выражения и превращает операторы if в тернарные. csso сокращает цвета (#ff0000 становится red), убирает единицы у нулевых значений и объединяет правила с одинаковыми объявлениями или селекторами.
Результат работает точно так же, как исходный код, но обычно на 30–70% меньше для JavaScript и на 15–40% меньше для CSS до сжатия.
Почему важен размер после gzip
Веб-серверы и CDN сжимают текстовые файлы с помощью gzip или Brotli перед отправкой, поэтому на скорость загрузки влияет сжатый размер, а не исходный. Сжатие уже убирает большую часть повторов, на которые нацелена минификация, поэтому экономия в 60% после минификации может превратиться в 20% после gzip. Это всё равно стоит того при каждом просмотре страницы, а сокращение имён особенно хорошо работает и после сжатия.
Значение gzip здесь рассчитано для уровня 6 — стандартного для nginx и большинства серверов. Brotli обычно даёт ещё на 10–20% меньше.
Описание параметров
- Сокращать имена
- Переименовывает локальные переменные и параметры функций в короткие имена. Глобальные имена и свойства объектов никогда не меняются, поэтому код, который вызывают другие скрипты, продолжает работать.
- Сжимать
- Для JavaScript — проходы оптимизации terser: удаление мёртвого кода, свёртка констант, инлайнинг. Для CSS — реструктуризация csso, которая объединяет и переупорядочивает правила, когда это безопасно.
- Сохранять лицензионные комментарии
- Сохраняет комментарии, начинающиеся с /*! или содержащие @license или @preserve: многие open-source-лицензии требуют их оставлять.
- Встроенные CSS и JS
- В HTML минифицирует содержимое элементов <style> и <script> и атрибутов style. Блоки JSON-LD тоже сжимаются; скрипты других типов не затрагиваются.
- Убирать кавычки у атрибутов
- Пишет class=nav вместо class="nav", где это допускает HTML. Это валидный HTML, но некоторые XML-инструменты и шаблонизаторы его не любят, поэтому по умолчанию параметр выключен.
Как минифицируется HTML
Минификация HTML здесь намеренно осторожная. Комментарии удаляются, кроме условных комментариев Internet Explorer. Последовательности пробелов сводятся к одному пробелу, а пробелы рядом с блочными элементами вроде <div> и <p>, где они никогда не отображаются, удаляются. Между строчными элементами всегда остаётся один пробел, иначе <b>big</b> <i>world</i> слились бы в одно слово. Содержимое <pre> и <textarea> никогда не меняется.
Если во встроенном скрипте есть синтаксическая ошибка, он остаётся в исходном виде, а вам сообщается номер строки — вместо того чтобы ломалась вся страница.
Форматирование минифицированного кода
Форматирование использует js-beautify, чтобы заново расставить отступы: одна инструкция на строку для JavaScript, одно объявление на строку для CSS и вложенные отступы для HTML. Это самый быстрый способ прочитать минифицированный сторонний скрипт или разобраться в таблице стилей, скопированной из браузера. Исходные имена переменных и комментарии, удалённые минификатором, вернуть нельзя, но структура становится понятной.
Для других форматов есть JSON Formatter и форматировщик SQL.
Часто задаваемые вопросы
- Мой код куда-нибудь загружается?
- Нет. terser, csso и js-beautify работают в вашем браузере, поэтому код остаётся на вашем устройстве.
- Будет ли минифицированный JavaScript работать?
- Да. terser вносит только изменения, сохраняющие поведение. Коду, который зависит от имён функций или классов во время выполнения, например некоторым фреймворкам внедрения зависимостей, может понадобиться отключить сокращение имён.
- Поддерживается ли современный JavaScript и ES-модули?
- Да. terser понимает современный синтаксис, включая классы, async/await, optional chaining и top-level await. Файлы с инструкциями import или export минифицируются как ES-модули.
- Можно ли минифицировать TypeScript или JSX?
- Нет. Сначала скомпилируйте TypeScript или JSX в JavaScript, затем минифицируйте результат. Если код не является обычным JavaScript, будет показана синтаксическая ошибка со строкой и столбцом.
- Чем минификация отличается от gzip?
- Минификация переписывает сам код, делая его короче. Gzip — это сжатие, которое сервер применяет к любому файлу при отправке. Они работают вместе: сначала минифицируйте, затем пусть сервер сжимает.
- Можно ли «разминифицировать» JavaScript или CSS?
- Да. Выберите «Форматировать», чтобы заново расставить отступы в минифицированном коде. Исходные имена переменных и комментарии не восстановить, но структура станет читаемой.
- Почему правила моего CSS объединяются или переставляются?
- Это реструктуризация csso, которая объединяет правила с одинаковыми объявлениями или селекторами. Для обычных таблиц стилей это безопасно; отключите «Сжимать», если вы полагаетесь на точный порядок правил между селекторами с одинаковой специфичностью.