Рассказываю о том, как сделать CSS-код абсолютно нечитаемым и неприемлемым для модификации, но при этом в разы легче, чище и понятнее для компьютера. Речь пойдет о минификации CSS, делающей из медленных сайтов быстрые.
Что такое минификация кода?
Думаю, из названия понятно, что под минификацией понимается уменьшение чего-либо. Когда речь идет о минификации кода, подразумевается сокращение размера файлов с кодом, количества самого кода и затрат других ресурсов на его исполнение.
Минификация позволяет значительно сократить количество строк кода в разметке или скриптах. Под раздачу попадает буквально все, что делает жизнь программистов легче, повышая читаемость кода: пробелы, переносы строк, дополнительные запятые и т.п. Ведь программе все эти «приспособления» не нужны. Компьютер спокойно читает огромный поток кода без каких-либо опознавательных знаков, необходимых человеку.
Зачем минифицировать код?
Минификация кода – это один из наиболее эффективных методов ускорения загрузки сайтов или приложений. Возможно, вы не в курсе, но пробелы, переносы строк, как и все символы в тексте, занимают пространство в памяти компьютера. Например, CSS-файлы становятся тяжелее, если в них, помимо кода, есть еще сотни переносов строк, что негативно сказывается на общей производительности веб-ресурса.
Получая возможность убрать комментарии и структуризацию из стилей сайта, мы даем компьютеру возможность быстрее считывать всю информацию о стилях и применять их без задержек, требующихся на обработку данных перед отображением сайта в браузере пользователя.
Помимо удаления ненужных машине символов из СSS-файлов, минификация также подразумевает массовое переименовывание переменных и классов в CSS, чтобы еще сильнее сократить размер файлов со стилями.
Разница между компрессией и минификацией
Процесс минификации – это целый комплекс мер по удалению символов в коде и изменению названий переменных. То есть непосредственное влияние на содержимое файлов со стилями.
Компрессия – это методика сокращения размера файлов со стилями до того, как они будут «доставлены» в браузер пользователя. Что-то в духе архивирования файлов перед отправкой их другим людям по электронной почте или до отправки файлов в облачное хранилище.
Заменить одно другим не получится, но можно использовать обе методики параллельно, чтобы достичь наилучших результатов.
Как минифицировать CSS?
Чаще всего для минификации кода используются сторонние инструменты. Либо CSS-файлы скармливают специальным программам в браузерах, чтобы в ответ получить код в уже «переработанном» виде, либо используют отдельные модули, встраиваемые в список доступного для разработки ПО. Таким образом, удается сократить трудозатраты и сократить количество проблем, связанных с ручной обработкой минифицированного кода в файлах со стилями.
Далее рассмотрим несколько наиболее популярных методов минификации CSS-кода.
При помощи npm-плагинов
Один из ключевых методов обработки CSS, который рекомендуют многие разработчики. Системы для минификации кода в духе CSSNano отлично справляются со своей задачей и в целом довольно просты с точки зрения применения. Но нужно понимать, что для работы некоторых минификаторов вам дополнительно понадобится скачать зависимые пакеты либо сторонние приложения для обработки CSS-контента.
- CSSNano – это расширение для популярного пакета PostCSS, позволяющего значительно расширить возможности базовых файлов стилизации благодаря дополнительным функциям и модулям, в разной степени меняющих контент в CSS. На базе PostCSS работают почти все CSS-фреймворки, и CSSNano не стал исключением. Чтобы его установить, нужно ввести команду npm install cssnano, затем установить postcss и в конфигурационном файле прописать параметры для CSSNano. Подробнее о них можно узнать на официальном сайте cssnano.
- CSS-Minify – это независимая сторонняя утилита, которая может работать без привязки к сторонним приложениям. То есть можно просто установить CSS-Minify и не думать о настройке параметров в условном PostCSS. Чтобы воспользоваться этой программой, вводим в командную строку команду npm install css-minify -g (она установит утилиту на ПК). Потом вводим команду css-minify -f [путь до файла со стилями]. Довольно просто.
Плагины в составе упаковщиков
Описанный выше процесс можно частично автоматизировать, если подключить установленные ранее плагины к бандлерам. Бандлер (или упаковщик) – это специальный комплекс программ, позволяющий каким-либо образом перерабатывать весь код, что хранится в вашем проекте.
Один из таких упаковщиков – Webpack. С его помощью можно разрозненные JavaScript-, HTML- и CSS-файлы собрать в единый проект, уже минимизированный и готовый к прочтению любыми браузерами. Процесс обработки сайтов называется компиляцией и включает в себя много этапов. Причем многие из них можно добавить в Webpack самостоятельно, установив модули вроде MiniCssExtractPlugin, postcss-loader и т.д.
Чтобы использовать сторонние плагины для минификации CSS внутри Webpack, необходимо ознакомиться с официальной документацией программы и научиться корректно настраивать конфигурацию webpack.config.js.
С помощью онлайн-сервисов
Для тех, кто не хочет устанавливать сторонние плагины или пока только экспериментирует с минификацией стилей, созданы специальные онлайн-сервисы, выполняющие ту же задачу. Если вы связаны с разработкой, то наверняка знаете о продуктах в духе валидаторов, помогающих убрать лишние элементы из кода и адаптировать его под общепринятые стандарты качества. Такие есть для JSON-файлов, HTML-файлов, скриптов на разных языках программирования и, конечно, для CSS-документов.
Minify
Довольно простой с точки зрения функциональности и интерфейса проект. Выполняет всего одну задачу, но делает это быстро и качественно. Достаточно напрямую скормить Minify свой CSS-код, и мы тут же получим переработанный документ с нужными стилями.
CSS Minifier
Аналогичный минификатор. Отличается от вышеописанного только возможностью минифицировать другие виды языков.
Minify Code
Схожий инструмент со слегка измененным интерфейсом. Более логичный в плане управления.
С помощью CDN-серверов
Некоторые хостинг-провайдеры, помимо размещения приложения на конкретном сервере, предлагают целую серию CDN-площадок (дополнительных серверов, которые сохраняют кэшированные версии вашего сайта и сильно ускоряют их «доставку» пользователям). На этих CDN-площадках иногда работают минификаторы и компрессоры, позволяющие без редактуры основного кода проекта (не используя минификаторы и прочие обработчики непосредственно в коде сайта или приложения) отправлять переработанные стили посетителям страницы. Грубо говоря, вам не придется делать какую-то дополнительную работу, а пользователи получают сжатый контент, который быстрее загружается.
Tailwind и другие фреймворки
Некоторые прогрессивные CSS-фреймворки, перерабатывающие стили при помощи JS-скриптов, по умолчанию минифицируют код. Например, Tailwind не выгружает всю свою коллекцию классов в приложение при каждой загрузке. Компилятор Tailwind поступает умнее, доставляя контент в уже сжатом виде, сохраняя в файлах со стилями исключительно нужные строки и уничтожая все, что может впустую отнимать пространство и сокращать производительность сайта.
Похожим образом поступают бойлерплейты (шаблоны) в духе Bootstrap или Bulma. Они помогают писать код, используя человекоудобный синтаксис, а на этапе запуска на сервере предоставляют компьютеру уже видоизмененные данные. Про Tailwind я уже писал более подробно.
Удаление ненужного CSS-кода
Эта часть статьи касается в основном тех, кто пользуется большим количеством сторонних дополнений для CMS или же подключает много сторонних утилит с уже готовыми CSS-компонентами. В этом случае в вашем проекте может генерироваться слишком большое количество ненужного CSS-кода.
И это даже не какие-то структуры, упрощающие чтение кода или его модификацию. Нет, это просто ненужные стили и классы, появившиеся ввиду невнимательности программиста или из-за того, что в используемый бойлерплейт уже встроено много лишних классов, которые не подвергаются уничтожению на этапе компиляции проекта.
Подробно о том, как удалить неиспользуемый CSS-код, я писал ранее.
Ручная минификация
Самый сложный и наименее распространенный вариант минификации. Да, для минификации не нужны специальные приложения, сервисы или дополнительные модули для среды разработки. Можно самостоятельно менять названия в переменных, удалять лишний код и вообще писать все стили в одну строку, изо всех сил пытаясь сократить количество используемых знаков.
Проблема лишь в том, что код будет с ходу нечитаемым, а значит, велика вероятность напороться на ошибки еще на этапе разработки приложения (точнее, его стилизации).
Вместо заключения
Не игнорируйте процессы оптимизации кода, даже такие простые, как удаление лишних стилей или минимизация CSS-кода. Здесь, как и в случае с рефакторингом, по отдельности какие-то изменения не несут видимых изменений, но вкупе они значительно влияют на восприятие программы или сайта пользователями. Продукты становятся быстрее и отзывчивее, а это чуть ли не ключевые факторы, необходимые для успешного развития вашего проекта.
Комментарии