Сжатие JavaScript
Вставьте JavaScript в поле, чтобы удалить лишние символы. Скопируйте сжатый код и сравните отображаемые размеры до и после обработки.
Инструмент минификации JavaScript
Формула сжатия JavaScript
Где:
- \(L_{\mathrm{in}}\) — длина входной строки, как её измеряет JavaScript.
- \(N_{\mathrm{LF}}\) — количество символов перевода строки во входных данных.
- \(L_{\mathrm{out}}\) — длина строки сжатого кода.
- \(d\) — значение, показанное как «До»; \(R\) — отображаемый коэффициент сжатия.
Инструмент сжимает входные данные с помощью упаковщика JavaScript, а затем сравнивает длину результата со скорректированной длиной входных данных. Положительный коэффициент означает, что по этой мере вывод короче исходного кода.
Сжатие JavaScript — пример расчёта
Пример: возьмите стандартную функцию, которая выводит «hello». Её исходный код содержит 43 символа, включая два перевода строки. Сжатый результат — function test(){console.log("hello")} длиной 37 символов.
\[d=43+2=45\qquad R=\frac{\operatorname{round}\!\left(1000\frac{45-37}{45}\right)}{10}\%=17.8\%\]
Результат: До: 45B; После: 37B; Коэффициент сжатия: 17.8%. Значение «До» больше длины исходной строки в 43 символа, потому что этот инструмент добавляет единицу за каждый перевод строки, если во входных данных нет символов возврата каретки.
Как пользоваться калькулятором
- Вставьте или введите исходный код в поле JavaScript-код для сжатия. Изначально поле содержит короткий пример функции, который можно заменить.
- Запустите калькулятор, чтобы получить Сжатый код. Если поле пустое, вместо результата появится сообщение «Введите код».
- Проверьте вывод и показатели До, После и Коэффициент сжатия. С помощью кнопки копирования перенесите сжатый код в свой проект.
- Протестируйте скопированный код в целевой среде перед развёртыванием.
Что здесь означает сжатие JavaScript
Этот инструмент делает исходный код JavaScript компактнее, пропуская его через упаковщик с отключёнными дополнительным кодированием и сокращением имён переменных. Цель — удалить символы, не нужные для синтаксиса кода, например подходящие для удаления комментарии и пробелы. Результат обычно труднее читать, чем оригинал, поэтому сохраните редактируемую копию исходного кода.
Более короткая исходная строка может уменьшить объём JavaScript, передаваемого в браузер, но отображаемый коэффициент не является прогнозом ускорения загрузки страницы. Серверы могут применять gzip или Brotli, что способно изменить разницу в передаваемых байтах. Время загрузки также зависит от кэширования, состояния сети и остальной части страницы. Чтобы подробнее изучить размер файла или текста, сравните результат с калькулятором «Размер текста».
Минификация — это не то же самое, что обфускация. Компактный код остаётся исходным кодом JavaScript, и его может быть относительно легко изучить. Если вы сравниваете эти подходы, обфускатор JavaScript (eval) даёт на выходе результат иного рода; инструмент декодирование JavaScript Eval предназначен для исследования кода, упакованного через eval, а не для отмены обычной минификации.
Допущения и практические ограничения
Метки размера обозначаются «B», но расчёт использует длины строк JavaScript, а не количество байтов в сохранённом файле UTF-8. JavaScript считает кодовые единицы UTF-16, поэтому символы вне ASCII могут приводить к расхождению отображаемых значений с реальными размерами файлов. Кроме того, инструмент добавляет единицу к длине входных данных за каждый перевод строки, когда в них нет символов возврата каретки. Эта корректировка влияет на отображаемый коэффициент; в сжатый код символы при этом не добавляются.
Для кода, который уже компактен, сжатие может дать совсем небольшую экономию, а отрицательный коэффициент возможен, если при измерении данным инструментом вывод оказывается длиннее. Не считайте положительный коэффициент доказательством неизменности поведения. Синтаксис JavaScript чувствителен к переносам строк и к определённым комментариям, а старые упаковщики могут не поддерживать все современные возможности языка. Проверяйте результат, особенно если ваш код использует новый синтаксис или зависит от сохранения комментариев.
Для продуктивной работы сохраняйте читаемый исходный код и проверяйте сжатую версию с помощью обычных тестов и целевых браузеров. Если важен размер при передаче, сравнивайте фактические размеры отдаваемых файлов. Если нужно отдельно проверить количество символов в исходной строке, воспользуйтесь счётчиком символов; его результат не обязан совпадать со скорректированным показателем «До» этого инструмента.
Часто задаваемые вопросы
Как сжать JavaScript вручную?
Начните с удаления комментариев, которые не нужны во время выполнения, и сокращения пробелов там, где они не разделяют лексемы. Затем проверьте результат в парсере JavaScript и запустите свои тесты. Не удаляйте переносы строк бездумно: перенос строки может повлиять на интерпретацию оператора. Для чего-то большего, чем небольшой фрагмент, проверенный минификатор надёжнее ручного редактирования.
Может ли удаление комментариев в JavaScript что-то сломать?
Да. Некоторые комментарии содержат инструкции для инструментов сборки, требования лицензий или ссылки на source map. Определённые комментарии могут также влиять на разбор кода. Перед сжатием выясните, какие комментарии должен сохранить ваш проект, и не предполагайте, что код, который выглядит неизменным, будет работать так же. Протестируйте результат в целевой среде.
Какой коэффициент сжатия JavaScript считается хорошим?
Универсального ориентира нет. В читаемом исходном коде с отступами и комментариями обычно больше удаляемых символов, чем в уже минифицированном. Оценивайте результат применительно к одному и тому же исходному коду и методу измерения, а затем проверьте фактический файл, который получают пользователи. Высокий процент бесполезен, если вывод не проходит тесты или удаляет нужные вам комментарии.
Почему сжатый JavaScript может быть длиннее оригинала?
Очень короткий или уже компактный код может почти не содержать того, что можно удалить, тогда как упаковщик может добавлять или сохранять символы ради корректности вывода. В результате при расчёте длины этим инструментом вывод может оказаться длиннее. Отрицательный коэффициент не означает, что код некорректен; он означает лишь, что данное преобразование не сократило измеренную длину.
Как узнать фактический размер сжатого кода в UTF-8?
Сохраните вывод в файл UTF-8 и проверьте его размер в байтах либо измерьте его в JavaScript с помощью new TextEncoder().encode(code).length. Это важно, когда исходный код содержит символы вне ASCII: их размер в байтах UTF-8 может отличаться от длины строки, отображаемой калькулятором. Проверьте сохранённый файл, если его кодировка или окончания строк могут измениться.
Нужны ли gzip или Brotli после минификации JavaScript?
Обычно да. Минификация удаляет символы из исходного кода, а gzip и Brotli сжимают байты, передаваемые по сети; эти методы можно использовать вместе. Их экономия не просто суммируется, поскольку сжатие и само может хорошо справляться с повторяющимися пробелами. Сравнивайте размеры передачи при одинаковых настройках сервера, а не оценивайте их по проценту минификации.
Как отлаживать JavaScript после сжатия?
Сохраните исходный код и сгенерируйте source map, если ваш инструмент сборки её поддерживает. Source map позволяет средствам разработчика браузера связывать позиции в компактном файле с читаемым исходным кодом. Этот калькулятор не создаёт source map, поэтому сохраните идентифицируемую версию исходного кода и протестируйте её перед заменой развёрнутого файла.