Веб-разработка

JS Minify / Beautify

Сжать JavaScript для продакшена или отформатировать свёрнутый код в удобный для чтения вид.


                        
                    

Minifying JavaScript strips whitespace, comments, and line breaks, and often shortens local variable names — none of that changes how the code runs, but it noticeably shrinks the file for a faster load.

How to use it

Common uses

Things to keep in mind

Minification isn't obfuscation — variables get renamed to shrink size, not to hide logic; serious obfuscation needs dedicated specialized tools.

Minified code in production without a source map is hard to debug — the line numbers in error messages won't match the original file.

Статья об этом инструменте: Минификация JavaScript: разница между минификацией и обфускацией

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

Какой инструмент использует минификатор под капотом?

Он использует terser, широко применяемый минификатор и компрессор JavaScript, который также понимает современный синтаксис.

Почему минифицированный JavaScript сложнее отлаживать?

Terser сокращает имена переменных и функций, убирает пробелы и комментарии, а поскольку этот инструмент не генерирует source map, инструменты разработчика браузера не могут сопоставить минифицированный код с читаемыми исходными строками.

Сломает ли минификация мой код?

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

Чем tree shaking отличается от минификации?

Tree shaking удаляет из бандла код, который нигде не используется, анализируя граф зависимостей модулей во время сборки, тогда как минификация лишь сокращает текстовую запись уже имеющегося кода — она не удаляет ни одной функции, которая реально выполняется.

Безопасно ли использовать минифицированный JavaScript в продакшн без дополнительной проверки?

Да, минификация — это чисто синтаксическое преобразование, которое сохраняет поведение программы идентичным; любое отличие в поведении после минификации свидетельствует о баге в самом минификаторе, а не о намеренном изменении логики.

Статьи: Веб-разработка

HEX, RGB, HSL: почему для цвета существует столько записей

Почему дизайнеры часто выбирают HSL вместо HEX, когда нужно подобрать оттенок цвета вручную.

Минификация CSS: что именно удаляется из файла и зачем

Почему минифицированный CSS работает точно так же в браузере, хотя и становится нечитаемым для человека.

Минификация HTML: почему пробелы в разметке вообще имеют значение

Почему удаление пробелов в <pre> или textarea может сломать вид страницы, в отличие от других мест.

CSS-градиенты: чем linear отличается от radial и conic

Почему conic-gradient подходит для круговых диаграмм, а radial — для эффекта светового пятна.

Алгоритм Луна: как номер карты проверяют на корректность

Почему валидный по алгоритму Луна номер карты не означает, что такая карта реально существует.

IBAN: как устроен международный номер банковского счёта

Почему первые две буквы в IBAN — это код страны, а не часть номера счёта.

QR-коды: как в квадрате из пикселей помещается ссылка

Почему QR-код с логотипом по центру всё ещё сканируется, хотя часть рисунка перекрыта.

Штрихкоды: чем Code 128 отличается от EAN-13

Почему на товарах в магазинах почти всегда EAN-13, а не Code 128.

Placeholder-изображения: зачем нужны картинки-заглушки в разработке

Почему верстальщики намеренно вставляют серые прямоугольники вместо реальных фотографий на этапе разработки.