PurgeCSS¶

PurgeCSS — это инструмент для анализа и удаления неиспользуемого CSS-кода из файлов стилей веб-проектов. Относится к классу оптимизаторов фронтенда, предназначенных для уменьшения размера итоговых CSS-файлов путём сопоставления селекторов в стилях с содержимым HTML-шаблонов, JavaScript-файлов и других источников. PurgeCSS работает на основе статического анализа, не требует выполнения кода в браузере и интегрируется в процессы сборки (Webpack, Vite, Gulp, PostCSS и другие).

¶История

PurgeCSS был создан в 2018 году разработчиком Фабьеном Спинкером (Fabien Spinkler) как альтернатива существовавшим на тот момент инструментам для удаления мёртвого CSS, таким как uncss и purifycss. Основной проблемой предшественников была низкая точность: они часто ошибочно удаляли динамически используемые классы (например, добавляемые через JavaScript) или, наоборот, оставляли неиспользуемые стили. PurgeCSS предложил более гибкий механизм настройки, позволяющий разработчику явно указывать, какие селекторы должны быть сохранены, даже если они не найдены в анализируемых файлах.

Первая стабильная версия (1.0) вышла в 2019 году. Инструмент быстро приобрёл популярность, особенно в сообществе Tailwind CSS, так как утилитарный подход этой библиотеки генерирует тысячи классов, большинство из которых не используются в конкретном проекте. Начиная с версии 2.0 (2020 год) PurgeCSS был интегрирован непосредственно в Tailwind CSS в качестве стандартного механизма оптимизации. В 2021 году вышла версия 4.0, в которой была улучшена поддержка JavaScript-фреймворков (React, Vue, Angular) и добавлена возможность работы с произвольными строками через специальные плагины.

¶Принцип работы

PurgeCSS анализирует содержимое исходных файлов (HTML, JS, шаблоны) и извлекает из них все строки, которые могут быть CSS-селекторами. Затем он сравнивает эти строки с селекторами, объявленными в CSS-файлах. Селекторы, не найденные ни в одном из анализируемых файлов, считаются неиспользуемыми и удаляются из итогового файла стилей.

Процесс состоит из нескольких этапов:

1. Извлечение содержимого — PurgeCSS считывает все файлы, указанные в опции content (например, .html, .js, *.vue). Для каждого типа файла может использоваться свой экстрактор (функция, извлекающая потенциальные селекторы).
2. Парсинг CSS — инструмент разбирает CSS-файлы на отдельные правила и селекторы.
3. Сопоставление — каждый селектор из CSS проверяется на наличие в списке извлечённых строк. Если селектор не найден, он помечается как неиспользуемый.
4. Удаление — неиспользуемые правила (вместе с соответствующими объявлениями) удаляются из CSS. При этом PurgeCSS старается сохранить структуру файла и не удаляет правила, если они содержат @keyframes, @font-face или другие директивы, которые могут быть неявно использованы.

¶Экстракторы

По умолчанию PurgeCSS использует встроенный экстрактор, который ищет в тексте любые последовательности символов, соответствующие синтаксису CSS-классов (начинаются с точки, дефиса или подчёркивания). Однако для сложных проектов (например, с динамическими именами классов, формируемыми через шаблонные строки) требуется кастомный экстрактор. PurgeCSS поддерживает подключаемые экстракторы для популярных фреймворков: @fullhuman/postcss-purgecss для PostCSS, purgecss-from-html для HTML, purgecss-from-js для JavaScript.

¶Классификация и варианты использования

PurgeCSS может применяться в двух основных режимах:

• Как модуль Node.js — используется в скриптах сборки или в качестве плагина для инструментов (Webpack, Vite, Gulp). В этом случае PurgeCSS получает на вход конфигурационный объект с путями к файлам и опциями.
• Как CLI-инструмент — позволяет запускать очистку из командной строки, что удобно для одноразовых задач или интеграции в CI/CD-пайплайны.

¶Интеграция с PostCSS

Наиболее распространённый способ использования — плагин для PostCSS (@fullhuman/postcss-purgecss). Он подключается в файл конфигурации PostCSS (например, postcss.config.js) и выполняется на этапе сборки. Пример конфигурации:

``javascript module.exports = { plugins: [ require('@fullhuman/postcss-purgecss')({ content: ['./src/**/*.html', './src/**/*.js'], defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [] }) ] } ``

¶Интеграция с Tailwind CSS

Начиная с Tailwind CSS v2.0, PurgeCSS является встроенным механизмом оптимизации. В файле конфигурации Tailwind (tailwind.config.js) достаточно указать пути к шаблонам в опции purge:

``javascript module.exports = { purge: ['./src/**/*.html', './src/**/*.vue', './src/**/*.jsx'], // ... } ``

Tailwind автоматически настраивает экстрактор для своих утилитарных классов, что позволяет сократить итоговый CSS с сотен килобайт до нескольких килобайт в production-сборке.

¶Настройка и опции

PurgeCSS предоставляет ряд опций для тонкой настройки поведения:

• content — массив путей к файлам, которые нужно проанализировать. Поддерживает glob-шаблоны.
• css — массив путей к CSS-файлам, подлежащим очистке.
• defaultExtractor — функция, извлекающая селекторы из содержимого. По умолчанию используется встроенный экстрактор.
• extractors — массив объектов с полями extractor (функция) и extensions (массив расширений файлов, для которых применяется этот экстрактор).
• safelist — массив селекторов, которые должны быть сохранены в любом случае, даже если они не найдены в анализируемых файлах. Поддерживает регулярные выражения.
• blocklist — массив селекторов, которые должны быть удалены, даже если они найдены в анализируемых файлах.
• rejected — опция для вывода списка удалённых селекторов в консоль.
• keyframes — если true, PurgeCSS также удаляет неиспользуемые @keyframes.
• fontFace — если true, PurgeCSS удаляет неиспользуемые @font-face.

¶Примеры использования

¶Очистка CSS в проекте на React

Для проекта на React с использованием CSS-модулей или обычных CSS-файлов PurgeCSS настраивается через Webpack или Vite. В Webpack используется плагин purgecss-webpack-plugin:

```javascript const PurgeCSSPlugin = require('purgecss-webpack-plugin') const glob = require('glob') const path = require('path')

module.exports = { plugins: [ new PurgeCSSPlugin({ paths: glob.sync(${path.join(__dirname, 'src')}/**/*, { nodir: true }), safelist: ['active', 'visible'] }) ] } ```

¶Очистка CSS в проекте на Vue

В проектах на Vue PurgeCSS может быть интегрирован через @fullhuman/postcss-purgecss с указанием путей к .vue-файлам. Экстрактор по умолчанию корректно обрабатывает шаблоны Vue, но для динамических классов (например, :class="condition ? 'class-a' : 'class-b'") может потребоваться кастомный экстрактор.

¶Критика и ограничения

Основной недостаток PurgeCSS — риск случайного удаления динамически используемых классов. Если имя класса формируется через конкатенацию строк или вычисляется на основе данных, полученных с сервера, PurgeCSS может не найти его в статическом анализе. Для предотвращения этого разработчику необходимо явно добавлять такие классы в safelist или использовать кастомные экстракторы.

Другое ограничение — PurgeCSS не анализирует CSS, встроенный в JavaScript-строки, если не указан соответствующий экстрактор. Например, классы, используемые в библиотеках, которые добавляют стили через style-теги динамически, могут быть ошибочно удалены.

Также PurgeCSS не поддерживает анализ CSS-переменных (custom properties) и селекторов, использующих псевдоэлементы или псевдоклассы, если они не встречаются в явном виде в анализируемых файлах.

¶Альтернативы

• UnCSS — более старый инструмент, который требует запуска страницы в headless-браузере (PhantomJS или Puppeteer) для определения используемых стилей. Более точен для динамических страниц, но медленнее и сложнее в настройке.
• PurifyCSS — предшественник PurgeCSS, использовался в более ранних версиях Tailwind CSS. Менее гибок и не поддерживает кастомные экстракторы.
• CSSNano — минификатор CSS, который не удаляет неиспользуемые селекторы, но оптимизирует синтаксис (сокращает цвета, объединяет правила и т.д.). Часто используется вместе с PurgeCSS.
• Lightning CSS — современный парсер и оптимизатор CSS, который включает в себя функцию удаления неиспользуемых стилей, но работает на основе анализа CSS-модулей, а не содержимого HTML/JS.

¶Интересные факты

• PurgeCSS может сократить размер CSS-файла в проектах на Tailwind CSS с 3–4 МБ до 10–20 КБ в production-сборке.
• В версии 5.0 (2023 год) была добавлена поддержка анализа CSS-файлов, написанных на Sass и Less, через предварительную компиляцию.
• PurgeCSS используется в официальном шаблоне для создания проектов на Next.js (create-next-app) в качестве опции оптимизации.

¶Источники

• Официальная документация PurgeCSS (purgecss.com)
• Tailwind CSS Documentation — раздел «Optimizing for Production»
• Репозиторий PurgeCSS на GitHub (github.com/FullHuman/purgecss)
• Статья «PurgeCSS: A Guide to Removing Unused CSS» на SitePoint
• Документация PostCSS — плагин @fullhuman/postcss-purgecss