Покрытие CSS и неиспользуемые стили

Большие файлы CSS часто содержат стили для компонентов, которых нет на текущей странице. Каждый неиспользуемый байт увеличивает время разбора, построения CSSOM и передачи данных. В типичном рабочем приложении на любой конкретной странице может не использоваться 90% CSS или даже больше.

Откройте DevTools → панель покрытия (Cmd+Shift+P → Покрытие). Начните запись, взаимодействуйте со страницей, а затем остановите запись. Панель показывает каждый файл CSS с процентом использования и выделяет неиспользуемые правила красным цветом. Экспортируйте данные о покрытии в формате JSON для анализа.

PurgeCSS просматривает файлы HTML, JS и шаблонов, находит имена классов и удаляет неиспользуемые правила CSS. Настройте шаблоны путей так, чтобы охватить все файлы, в которых могут встречаться имена классов. Добавляйте динамически используемые классы (добавляемые с помощью JS) в список исключений, чтобы предотвратить случайное удаление.

JIT-компилятор Tailwind генерирует только служебные классы, фактически используемые в шаблонах. В результате CSS получается очень небольшим — часто 5–15 КБ для целого приложения, — поскольку неиспользуемые служебные классы вообще не генерируются. Это идеальный результат удаления неиспользуемых стилей.

В конфигурации webpack или Vite добавьте PurgeCSS с шаблонами путей, охватывающими все файлы шаблонов. Параметр safelist принимает строки, регулярные выражения и deep-safelist для сложных шаблонов динамических классов из библиотек вроде Headless UI.

CSS Modules создают уникальные имена классов для каждого файла и удаляют неиспользуемые модули с помощью настроек сборщика. В пакет сборки включаются только импортированные модули CSS, а размещение стилей рядом с компонентами естественным образом устраняет неиспользуемые глобальные стили.

Разделяйте CSS по маршрутам в таких фреймворках, как Next.js (извлечение CSS для каждой страницы), или используйте динамический импорт совместно с модулями CSS. Каждая страница загружает только собственные стили, поэтому анализ покрытия по страницам становится полезнее анализа всего приложения.

Аудит Lighthouse «Сократить неиспользуемый CSS» оценивает потенциальную экономию байтов от удаления неиспользуемых правил. Он выявляет конкретные ресурсы таблиц стилей с высокой долей неиспользуемого содержимого. Используйте его как ориентир для определения файлов, которые следует проверить в первую очередь.

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

Монолитные глобальные таблицы стилей со временем накапливают неиспользуемый CSS, поскольку функции удаляются. CSS для отдельных компонентов (CSS Modules, Styled Components, служебные классы Tailwind) проще очищать: стили находятся рядом со своими компонентами и удаляются вместе с ними.

Для больших устаревших файлов CSS сначала используйте UnCSS или PurgeCSS в режиме только отчёта. Отсортируйте правила по частоте использования. Извлеките и удалите явно неиспользуемые стили сторонних плагинов. Работайте постепенно, чтобы случайно не удалить стили для редких пограничных состояний.

Что измеряет панель покрытия Chrome DevTools?

Анализ покрытия CSS с помощью панели покрытия DevTools и Lighthouse выявляет неиспользуемые правила. PurgeCSS и JIT Tailwind автоматизируют удаление неиспользуемого кода. CSS Modules и разделение по маршрутам предотвращают накопление неиспользуемых стилей. Вместе они уменьшают объём CSS и время разбора.