автор Сара Даян

Я большой поклонник 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 непосредственно перед началом или созданием проекта. Каждый раз, когда этот скрипт запускается, он выводит a tailwind.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.