Минифицировать JavaScript

Что переименовать, что удалить и чего касаться нельзя

Происходят три вещи — по возрастанию того, сколько они экономят и чего вам стоят. Удаляются пробелы и комментарии — это бесплатно. Удаляется мёртвый код: ветка, которая никогда не выполнится, переменная, которой присвоили значение и ни разу его не прочитали. И сокращаются локальные имена, так что старательно названная calculateMonthlyTotal превращается в одну букву. Именно здесь основная экономия, и именно это делает результат нечитаемым: для выкладки это нормально, для отладки бесполезно.

Нельзя переименовывать ничего, к чему внешний мир обращается по имени, — именно на этом минификаторы ломают код. Экспортируемые функции, свойства объектов, к которым обращаются по строке, всё, что доступно через window, и имена, используемые в eval, должны остаться нетронутыми, потому что где-то ещё их ищут по тому имени, которое вы написали. Свойства по умолчанию особенно не трогаются: переименование user.emailAddress сломается в тот момент, когда объект сериализуют в JSON или прочитает код, минифицированный отдельно.

Сохраняйте карту исходного кода или оригинал. Когда имён больше нет, стек вызовов от реального пользователя выглядит как ошибка в функции t на символе 48 213 — и ни о чём вам не говорит. Карта исходного кода (source map) восстанавливает в отладчике и в отчётах об ошибках исходные имена и номера строк, а её создание ничего не стоит: это отдельный файл, который загружается, только когда кто-то открывает инструменты разработчика.

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

Если нужно другое

Этому место в сборке, а не во вкладке браузера, и современные сборщики делают это сами собой. esbuild --minify, Rollup и Vite минифицируют при сборке, автоматически создают карты исходного кода и — что гораздо важнее — выполняют tree shaking, отбрасывая те экспорты ваших зависимостей, которые вы никогда не импортируете. В реальном приложении это экономит несравнимо больше, чем минификация готового файла.

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