Минификация

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

Код практически нечитаем для человека, зато его лучше и быстрее выполняют машины. Страницы открываются быстрее — браузерам приходится загружать меньше кода.

Минификации обычно подвергают CSS и JavaScript. HTML «уменьшить» практически невозможно, да и бессмысленно — структура верстки должна сохраняться понятной.

Для чего нужна минификация кода

Минификация нужна, чтобы уменьшить размеры файлов с кодом, сделать их понятнее для компьютера и ускорить загрузку веб-страниц. Каждый символ занимает место в памяти. Поэтому код, написанный «для людей», с человекопонятными именами переменных, переносами и пробелами, будет медленным и громоздким с точки зрения компьютера.

Это не значит, что код нужно намеренно делать непонятным. В реальных проектах CSS и JS обычно существуют в двух версиях. Первая — версия разработчиков, подробная и ясная, со структурой отступов и наглядными именами переменных. Вторая — минимизированная, с названием, которое традиционно заканчивается на .min.css или .min.js — это договоренность между разработчиками про общие для всех названия.

Минифицированный код нужен не для того, чтобы его потом редактировали. Он загружается на сервер, и после этого с ним не работают. Если нужно внести изменения, их пишут в версии разработчиков, а потом минифицируют код заново.

Как работают минификаторы

Минификацией занимаются специальные программы. Они называются минификаторы (minifier) или минимизаторы и могут быть написаны на JS, PHP или другом языке. Такая программа получает на вход код и преобразует его по определенным правилам:

• названия переменных сокращаются до одного символа;
• переносы строк удаляются;
• пробелы и запятые между словами, если они не несут смысла, тоже удаляются;
• названия цветов и других сущностей упрощаются;
• похожие и одинаковые действия могут объединиться;
• комментарии в коде удаляются.

Минимизация — это не сжатие. В процессе не происходит компрессии и изменения формата — только редактирование кода. Минифицированный код — это все еще CSS или JS, написанный «портянкой», непонятный для человека, зато короткий и легковесный.

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

Минификация происходит перед загрузкой на сервер. До этого в ней просто нет смысла. Если код пока в процессе написания и разработчик запускает его только для тестирования, он работает с «полной» версией. На этом этапе человекопонятность важнее скорости.

В больших проектах код постоянно редактируют, в него что-то добавляют и меняют. Поэтому минификация нужна часто.

Ручная или автоматическая минификация?

Существуют программы для ручной минификации. Это обычно веб-сервисы: в поле для ввода текста надо загрузить код и нажать на кнопку Minify. После этого самостоятельно скопировать минифицированный код и сохранить его в файл.

Есть и программы, которые называют таск-менеджерами, — они предназначены для автоматизации рутинных задач разработки. Известный таск-менеджер для веба называется Gulp. После настройки и привязки к проекту он способен автоматически минифицировать код. Разработчик вводит команду в консоль, Gulp получает ее и выполняет целый комплекс действий:

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

На ранних этапах изучения фронтенда можно минифицировать код вручную, но в дальнейшем для большей эффективности лучше научиться работать с таск-менеджерами.

Как начать работать с минификаторами

Программ-минификаторов много. Можно открыть любую подходящую, скопировать туда код и нажать на кнопку минификации. Скрипт автоматически минифицирует CSS или JavaScript и покажет, сколько памяти удалось сохранить. Нужно скопировать из окна минифицированный код, вставить его в файл с окончанием .min.css или .min.js и сохранить. Затем минифицированный файл останется подключить к HTML-странице. Это занимает меньше пяти минут.

Автоматическая минификация сложнее: понадобится разобраться с Gulp или другим похожим инструментом и настроить его. Зато потом все действия будут выполняться без участия пользователя.