Минификацию JavaScript часто путают с обфускацией, хотя это две разные задачи с разной целью: одна экономит байты, другая усложняет понимание логики кода.
Что делает минификация
Минификатор удаляет пробелы, комментарии и переносы строк, а также сокращает имена локальных переменных до одного-двух символов там, где это безопасно. Логика программы остаётся абсолютно неизменной — это чисто техническое сжатие файла.
От JSMin до Terser: краткая история минификации JS
Один из первых широко известных минификаторов JavaScript, JSMin, написал Дуглас Крокфорд ещё в начале 2000-х — он просто убирал пробелы и комментарии, не трогая имена переменных. Современные инструменты вроде Terser (форк UglifyJS) и esbuild пошли дальше: они разбирают код в AST и переименовывают локальные переменные и параметры функций в однобуквенные имена — именно это, а не удаление пробелов, даёт основной прирост в сжатии на реальных проектах.
Source map — как отлаживать минифицированный код
Раз имена переменных заменены на a, b, c, а переносы строк исчезли, стектрейс ошибки в продакшене указывает на нечитаемую позицию в одной длинной строке. Source map решает эту проблему: это отдельный файл, который сопоставляет каждую позицию в минифицированном коде с исходной строкой и оригинальным именем переменной, позволяя DevTools браузера показывать читаемый стектрейс даже для минифицированного бандла.
Зачем это нужно
- Уменьшить размер JS-бандла перед деплоем на продакшн.
- Ускорить загрузку и парсинг скрипта в браузере.
- Понять, почему минифицированный код всё ещё можно прочитать, а обфусцированный — значительно сложнее.
Tree shaking против минификации
Tree shaking — это отдельная техника, которую не стоит путать с минификацией: она анализирует граф зависимостей модулей и полностью удаляет из финального бандла функции и экспорты, которые нигде не используются, ещё на этапе сборки. Минификация, напротив, работает с уже готовым кодом и лишь сокращает его текстовую запись. Современные сборщики вроде Vite или webpack обычно применяют обе техники последовательно: сначала tree shaking убирает мёртвый код, затем минификация сжимает то, что осталось.