Баннер мобильный (3) Пройти тест

Минификация

Глоссарий

27 марта 2023

Поделиться

Скопировано

Содержание

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

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

    Минификации обычно подвергают 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 или другим похожим инструментом и настроить его. Зато потом все действия будут выполняться без участия пользователя.

    Поделиться

    Скопировано

    0 комментариев

    Комментарии