Минифицировать CSS, JS и HTML

Удалите комментарии, отступы и лишние пробелы из стилей, скриптов и страниц — безопасно и без переименования чего-либо в коде.

Вставьте или наберите текст

Перетащите файлы сюда

.css, .js, .mjs, .html, .htm, .txt · до 20 МБ

Выберите файлы

Как минифицировать

1
Перетащите исходные файлы
Добавьте до двадцати таблиц стилей, скриптов или HTML-страниц, размером до 20 МБ каждый. Все файлы читаются и обрабатываются прямо в этой вкладке браузера.
2
Подтвердите язык
Сначала учитывается расширение файла, потом содержимое. Если однозначно определить не удалось, выберите CSS, JavaScript или HTML сами перед продолжением.
3
Скачайте минифицированные файлы
Каждый результат появляется рядом с оригиналом как файл с суффиксом .min, а пакет файлов возвращается одним ZIP-архивом.

Разбор по токенам — строки остаются строками

Каждый файл сначала разбирается на токены, и только потом из него удаляется хоть один символ. Поэтому последовательность, похожая на начало комментария, внутри строки не обрежет остаток строки. Две косые черты внутри URL не «съедят» правило. А угловая скобка с комментарием внутри скрипта не завершит блок раньше времени. Наивное удаление пробелов и переносов ломается на таких случаях, причем без явной ошибки.

Смысловые переводы строки сохраняются

В JavaScript перевод строки иногда работает как точка с запятой. return, за которым сразу идет разрыв строки, вернет undefined, а return с пробелом и выражением на той же строке вернет значение. Подставить вместо такого перевода строки пробел — значит изменить поведение кода. Переносы строк, от которых зависит язык, остаются на месте. В HTML содержимое тегов pre и textarea копируется дословно, а условные комментарии сохраняются: это часть разметки, а не просто заметки для разработчика.

Что он намеренно не делает

Имена переменных не укорачиваются, source map не создается. Чтобы переименовывать локальные переменные, нужен полный анализ областей видимости и полноценный парсер языка. Малейшая ошибка в таком анализе незаметно ломает рабочий код. Здесь таких преобразований нет, и никакая настройка не делает вид, что они есть. Экономия байтов меньше, чем у полноценной сборки с бандлером, зато все изменения обратимы.

Ваш код никуда не загружается

Чтение, разбор и перезапись выполняются целиком в этой вкладке браузера. Без сервера, без очереди и без копии, которая остается после закрытия страницы. Это критично для исходников: в них часто есть внутренние эндпоинты, комментарии о невыпущенных фичах и ключи, случайно оставленные в конфигурации.

Частые вопросы

Безопасно ли минифицировать чужой код?

Все преобразования здесь — это удаление того, что сам язык игнорирует: комментариев, отступов и лишних пробелов. Ничего не переписывается, не меняется порядок, не переименовываются идентификаторы, поэтому результат ведет себя так же, как исходник. Оригинал все равно сохраните: минифицированный файл — это артефакт сборки, а не то, что правят вручную.

Почему имена моих переменных не меняются?

Укорачивание имен — это анализ областей видимости поверх полноценного парсера языка. Ошибка в таком анализе незаметно меняет поведение кода в продакшене. Эта функциональность не реализована, и переключателя, который делает вид, что она есть, тоже нет. В итоге размер уменьшается безопасно, но меньше, чем у бандлера. Учитывайте это, когда сравниваете размеры файлов.

Это то же самое, что обфускация?

Нет. Минификация убирает байты, которые парсеру не нужны, и логику легко прочитать, если снова расставить отступы. Обфускация специально делает код трудным для понимания: переименовывает идентификаторы, кодирует строки, переписывает управление потоком. Здесь ничего не скрывается.

Будет ли создан source map?

Source map не генерируется. Чтобы сопоставить позиции в минифицированном файле с исходными строками, нужно отслеживать каждый токен на всем пути преобразований — это задача для сборщика. Для отладки держите неминифицированный файл, а в продакшен отдавайте минифицированный.

Можно ли минифицировать несколько файлов сразу?

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

Что будет, если в файле синтаксическая ошибка?

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

Почему мой файл почти не уменьшился?

Скорее всего, он уже был минифицирован. Если размер результата почти равен размеру исходника, значит, убирать больше нечего. Инструмент так и сообщает, но файл все равно отдает.

Сжимаются ли встроенные стили и скрипты в HTML?

Да. Блоки style и script в HTML-странице минифицируются теми же алгоритмами, что и отдельные файлы, а пробелы между тегами схлопываются до одного. Сломанный встроенный скрипт не ломает остальную страницу — этот блок остается как есть.