JS минификатор

JS минификатор, это бесплатный инструмент, который удаляет из JavaScript лишние символы и показывает количество символов до и после минификации.

Какую задачу решает минификация JavaScript?

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

Уменьшение скрипта может сократить объём передаваемых данных и затраты на разбор кода, особенно если сайт загружает несколько крупных сборок. При этом HTTP-сжатие с помощью Brotli или gzip по-прежнему важно, поскольку минификация и сжатие при передаче решают разные задачи. Минификация удаляет символы из исходного кода, а сжатие компактнее кодирует повторяющиеся данные во время передачи.

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

Успешная минификация не доказывает, что JavaScript работает правильно. В скрипте всё ещё могут быть неверные вызовы API, недоступные переменные или ошибки, возникающие только во время выполнения.

Как пользоваться JS минификатором?

Вставь JavaScript в поле JS, запусти инструмент и скопируй результат из поля Минифицированный JS. Храни исходный файл в системе контроля версий, а для развёртывания используй компактную копию, не заменяя ею читаемый исходный код.

1. Сначала проверь синтаксис исходного кода, запусти линтер и автоматические тесты.
2. Вставь весь скрипт в поле JS, включая импорты модулей и функции-обёртки, относящиеся к этому файлу.
3. Сравни значения Символы JS и Символы минифицированного JS, чтобы увидеть, как изменилось количество символов.
4. Убедись, что минифицированный JavaScript правильно выполняется в том же браузере и окружении, где будет использоваться рабочий файл.
5. Если читаемая и минифицированная версии хранятся вместе, используй понятное имя файла, например app.min.js.

Обработка выполняется на сервере. Введённые данные передаются на сервер по HTTPS и не сохраняются. Однако серверу всё равно необходимо получить JavaScript для обработки, поэтому не отправляй исходный код, который правила твоей организации запрещают передавать внешним сервисам.

Что входит в результат минификации?

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

Количество символов рассчитывается функцией PHP mb_strlen, которая измеряет длину многобайтовой строки, а не просто число байтов. Поэтому количество символов не равно итоговому объёму данных, передаваемых по сети. Символы UTF-8 могут занимать больше одного байта, а gzip или Brotli способны дополнительно уменьшить передаваемый файл.

Инструмент не выводит отдельное поле с результатами проверки или диагностики. Не стоит ожидать, что он обнаружит каждую пропущенную скобку, некорректное регулярное выражение или неподдерживаемую возможность языка. В частности, ошибки, характерные для JSON, например имена свойств без кавычек или завершающие запятые, нельзя считать надёжной проверкой JavaScript, поскольку синтаксис объектных литералов JavaScript отличается от синтаксиса JSON. Для данных JSON используй инструмент «Проверка и форматирование JSON».

Небольшие примеры и сложные случаи

Простое удаление лишних пробелов выглядит так.

Исходный код

function add(a, b) { return a + b; }

Компактная версия

function add(a,b){return a+b;}

Форматирование объекта также можно удалить, не меняя значения его свойств.

Исходный код

const settings = { theme: "dark", retries: 2 };

Компактная версия

const settings={theme:"dark",retries:2};

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

• Пробелы в строках являются данными. Пробелы в "Newcastle upon Tyne" должны сохраниться.
• Знаки пунктуации могут быть частью синтаксиса. Если удалить пробел из a + +b, может получиться другая последовательность токенов.
• Переносы строк иногда влияют на автоматическую вставку точек с запятой, в том числе в коде после return, break или continue. Перенос строки сразу после throw недопустим, поскольку выражение должно начинаться на той же строке.
• Символы с диакритическими знаками и символы нелатинских алфавитов могут встречаться в строках, а если это допускают правила идентификаторов JavaScript, то и в идентификаторах. Их размер в байтах может отличаться от количества символов.
• Числа являются токенами исходного кода, а не указаниями о количестве символов. Минификатор должен сохранять их числовое значение, даже если выбирает более короткую эквивалентную запись.

Когда минифицировать JavaScript не имеет смысла?

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

Также нет особого смысла сначала форматировать, а затем снова минифицировать JavaScript, предназначенный только для машинной обработки. Для сопровождения храни читаемый исходный код и создавай из него файлы для развёртывания. Для готового приложения обычно лучше подходит сборщик вроде esbuild, Rollup или webpack, поскольку он может автоматизировать объединение модулей и создание карт исходного кода. Минификация может быть встроена в сборщик или подключена через конфигурацию либо плагин, а Terser представляет собой отдельный специализированный минификатор.

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

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

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

Создаёт ли инструмент карту исходного кода?

Нет, отдельное поле с картой исходного кода не возвращается. Если нужно сопоставлять трассировки стека в рабочей среде с оригинальными файлами, создавай минифицированный скрипт и соответствующий файл .map в рамках одного процесса сборки. Карта исходного кода из другой сборки может показывать неверные номера строк и столбцов.

Помешает ли минификация скопировать мой JavaScript?

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

Можно ли вставлять код с ключами API?

Не вставляй секретные ключи API, токены и закрытые учётные данные. Введённый код передаётся по HTTPS и не сохраняется, но обрабатывается на сервере. Для публичных браузерных ключей, которые намеренно передаются каждому посетителю, всё равно нужно настроить ограничения по домену, источнику, квоте или разрешениям, если соответствующий сервис их поддерживает.

Всегда ли меньшее количество символов ускоряет загрузку страницы?

Нет. Результат зависит от исходного размера файла, кеширования, качества соединения, серверного сжатия, а также от объёма JavaScript, который браузеру приходится разбирать и выполнять. Помимо количества символов, проверяй размер сжатых данных при передаче и поведение кода во время выполнения.

Нужно ли сохранять расширение .js после минификации?

Да. Минифицированный JavaScript обычно сохраняет расширение .js, а если используются обе версии, для имени компактного файла принято расширение .min.js. Перед развёртыванием убедись, что сервер отправляет подходящий тип содержимого для JavaScript, а HTML или импорт модуля ссылается на нужный файл.