
Содержание статьи
автор Сара Даян

Я большой поклонник CSS, который прежде всего полезен. Испытав несколько методов в течение многих лет, я обнаружил это лучший, наиболее удобный и масштабируемый способ написания CSS на сегодняшний день.
Когда мы с коллегой Клеманом Дэнуа создали api-search.io, я решил использовать Tailwind CSS для его стилизации. Tailwind CSS — это библиотека, не зависящая от тем, полностью настраиваемая, прежде всего для утилиты.

Вся суть библиотеки состоит в том, чтобы предоставить вам доступ к широкому набору инструментов для использования по желанию. Проблема в том, что вы обычно используете только его подмножество, вы получите много неиспользованных правил CSS в вашем окончательном сборнике.
В моем случае я не только скачал всю библиотеку Tailwind CSS, но и добавил несколько вариантов к некоторым модулям. В итоге это привело к окончательной минимизации веса CSS 259 КБ (перед GZip). Это довольно трудно, если учесть, что сайт является простым одностраничным приложением с минимальным дизайном.
Вы не хотите скачивать каждую утилиту вручную, когда она вам нужна. Это было бы долгой и громоздкой задачей. Лучший сценарий – иметь все в вашем распоряжении во время разработки и автоматически удаляйте то, что вы не использовали на этапе создания.
В JavaScript мы называем это встряхиванием дерева. Теперь, благодаря PurgeCSS, вы можете сделать то же самое со своей кодовой базой CSS.
PurgeCSS анализирует файлы содержимого и CSS, а затем объединяет селекторы. Если он не находит никакого входа селектора в содержимое, он удаляет его из файла CSS.
Для большей части, это может работать с коробки. Однако на любом веб-сайте есть некоторые области, которые нуждаются в дополнительном размышлении, прежде чем позволить PurgeCSS сделать свою магию.
Разбиение моего CSS
Проект содержит три основных файла CSS:
- Сброс CSS под названием normalize.css, включенный в Tailwind CSS.
- Tailwind CSS, самая важная часть моей кодовой базы CSS.
- Некоторые пользовательские CSS, в основном для стилизации компонентов InstantSearch, в которые я не мог добавить классы.
PurgeCSS не может обнаружить, что мне нужно хранить селекторы, такие как .ais-Highlight
, потому что компоненты, которые его используют, отображаются только в DOM во время выполнения. То же касается normalize.css
: Я полагаюсь на это, чтобы сбросить стили браузера, но многие связанные компоненты никогда не будут совпадать, поскольку они созданы в JavaScript.
В случае занятий, начинающихся с .ais-
Мы можем отсортировать их с помощью белого списка. Теперь, когда дело доходит до стилей сброса, отследить селекторы немного сложнее. Кроме того, размер normalize.css
достаточно незначительный и не обязательно изменится. Потому в этом случае я решил вообще проигнорировать файл. следовательно, Мне пришлось разделить стили перед запуском PurgeCSS.
Моя начальная конфигурация CSS выглядела так:
- А
tailwind.src.css
файл с тремя@tailwind
директивы:preflight
,components
иutilities
. - An
App.css
файл с моими пользовательскими стилями. - Скрипт npm
package.json
чтобы создать Tailwind CSS непосредственно перед началом или созданием проекта. Каждый раз, когда этот скрипт запускается, он выводит atailwind.css
файл вsrc
который загружается в проект.
The @tailwind preflight
директивные нагрузки normalize.css
. Я не хотел, чтобы PurgeCSS касался его, поэтому я переместил его в отдельный файл.
// tailwind.src.css @tailwind components;
@tailwind utilities;/* normalize.src.css */ @tailwind preflight;
Затем я изменил свое существующее tailwind
сценарий в package.json
строить normalize.src.css
по отдельности.
{ "scripts": { "tailwind": "npm run tailwind:normalize && npm run tailwind:css", "tailwind:normalize": "tailwind build src/normalize.src.css -c tailwind.js -o src/normalize.css", "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.js -o src/tailwind.css" }}
Наконец-то я загрузился normalize.css
в проекте.
// src/index.js
...import './normalize.css'import './tailwind.css'import App from './App'...
Теперь я могу запустить PurgeCSS tailwind.css
не опасаясь, что это может избавиться от необходимых наборов правил.
Настройка PurgeCSS
PurgeCSS имеет много разновидностей: интерфейс командной строки, API JavaScript, обертки для Webpack, Gulp, Rollup и т.д.
Мы использовали Create React App для загрузки веб-сайта, поэтому Webpack был предварительно сконфигурирован и скрыт по сценариям реакции. Это значит, что я не мог получить доступ к файлам конфигурации Webpack, если не запустил npm run eject
чтобы получить их обратно и управлять ими прямо в проекте.
Отсутствие необходимости самостоятельно управлять Webpack имеет множество преимуществ, поэтому удаление не было выбором. Вместо этого я решил использовать специальный конфигурационный файл для PurgeCSS и сценарий npm.
Я впервые создал a purgecss.config.js
в корне проекта:
module.exports = { content: ['src/App.js'], css: ['src/tailwind.css']}
- The
content
свойство принимает массив файлов для анализа на соответствие селекторам CSS. - The
css
свойство требует для очищения массива таблиц стилей.
Затем я отредактировал свои скрипты npm для запуска PurgeCSS:
{ "scripts": { "start": "npm run css && react-scripts start", "build": "npm run css && react-scripts build", "css": "npm run tailwind && npm run purgecss", "purgecss": "purgecss -c purgecss.config.js -o src" }}
- Я добавил а
purgecss
скрипт, принимающий мой файл конфигурации и выводящий очищенную таблицу стилейsrc
. - Я запускал этот сценарий всякий раз, когда мы начинаем или создаем проект.
Tailwind CSS использует специальные символы, так что если вы используете PurgeCSS из коробки, он может удалить необходимые селекторы. К счастью, PurgeCSS позволяет использовать специальный экстрактор, который является функцией, которая перечисляет селекторы, используемые в файле. Для Tailwind мне нужно было создать свой:
module.exports = { ... extractors: [ { extractor: class { static extract(content) { return content.match(/[A-z0-9-:\/]+/g) || [] }, extensions: ['js'] } } ]}
Добавление классов во время выполнения в белый список
PurgeCSS не может обнаружить классы, генерируемые во время выполненияно это позволяет определить белый список. Классы, которые вы добавили в белый, остаются в окончательном файле несмотря ни на что.
В проекте используется React InstantSearch, генерирующий компоненты с классами, с которых все начинаются ais-
. Удобно PurgeCSS поддерживает шаблоны в виде регулярных выражений.
module.exports = { ... css: ['src/tailwind.css', 'src/App.css'], whitelistPatterns: [/ais-.*/], ...}
Теперь, если я забуду удалить класс, который я больше не использую App.css
он будет удален из окончательной сборки, но мои селекторы InstantSearch останутся в безопасности.
Новый сборник, легче CSS
С этой новой конфигурацией, мой окончательный файл CSS увеличился с 259 КБ до… 9 КБ! Это довольно важно в контексте целого проекта, тем более что во многих странах все еще есть медленный и нестабильный Интернет, и все больше людей просматривают на своих телефонах во время движения.
Доступность также относится к обслуживанию людей с низкой пропускной способностью. Не допустимо не пытаться помочь своим пользователям с медленным Интернетом, особенно если вы заставляете их загружать мертвый код.
Следует потратить минутку, чтобы оптимизировать свой сборник. ?
Первоначально опубликовано на frontstuff.io.