Минификация кода: что она делает и когда стоит заморачиваться

Твой JavaScript-файл весит 500KB. После минификации он 150KB. Что случилось с 70% файла?

В основном пробелы, комментарии и длинные имена переменных. Вещи, которые нужны людям, но не браузерам.

Что удаляет минификация

Пробелы. Отступы, пустые строки, лишние пробелы. Браузерам они не нужны.

Комментарии. Полезны для разработчиков, невидимы для браузеров. Удалены.

Длинные имена. calculateTotalPrice становится a. customerData становится b. Та же логика, меньше символов.

Мёртвый код. Некоторые минификаторы удаляют код, который никогда не выполняется.

Реальная экономия

Для JavaScript:

• Пробелы и комментарии: 30-50% уменьшения размера
• Переименование переменных: ещё 10-30%
• Удаление мёртвого кода: сильно варьируется

Для CSS:

• В основном пробелы и комментарии
• Более короткие селекторы помогают, но рискованны (они могут совпасть с другими элементами)

Для HTML:

• Менее драматичные выгоды
• Обычно только удаление пробелов

Когда минифицировать

Продакшн-сайты. Всегда. Более быстрое время загрузки, лучший пользовательский опыт, меньше расходов на трафик.

API-ответы. Иногда. Минификация JSON экономит трафик, но усложняет отладку.

Внутренние инструменты. Может быть. Скорость разработки может быть важнее времени загрузки.

Когда не минифицировать

Среды разработки. Отладка минифицированного кода болезненна. Храни source maps или не минифицируй во время разработки.

Требования читаемости. Некоторые open-source проекты сохраняют читаемый код в образовательных целях.

Крошечные файлы. Минификация файла в 1KB экономит почти ничего и добавляет сложность сборки.

Помимо минификации

Сжатие Gzip/Brotli. Минифицированный код сжимается ещё больше. Большинство серверов обрабатывают это автоматически.

Разделение кода. Загрузка только кода, необходимого для каждой страницы. Лучше, чем один гигантский минифицированный бандл.

Tree shaking. Бандлеры удаляют неиспользуемые экспорты. Импортируй только то, что нужно.

Эти техники комбинируются. Минифицируй, затем сжимай, затем разделяй разумно.

Source Maps

Минифицированный код нечитаем. a.b(c,d) ничего тебе не говорит во время отладки.

Source maps соединяют минифицированный код обратно с исходным кодом. Инструменты разработчика твоего браузера показывают читаемый код, пока запускается минифицированный.

Храни source maps в разработке. Решай, развёртывать ли их в продакшн, исходя из того, хочешь ли ты, чтобы пользователи видели твой исходный код.

Частые проблемы

Сломанные имена переменных. Минификаторы иногда искажают имена, которые должны оставаться нетронутыми (как API-ключи в строках). Настрой исключения.

CSS, зависимый от порядка. Агрессивная минификация CSS может переупорядочить правила и изменить каскадирование стилей.

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

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

---

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