PurgeCSS — удаление неиспользуемого CSS-кода.

PurgeCSS — это инструмент, который помогает удалить неиспользуемый CSS-код из проекта. Это важно, поскольку современные веб-приложения и сайты часто используют большие CSS-фреймворки, такие как Bootstrap или Tailwind CSS, которые содержат множество стилей, которые могут не использоваться в конкретном проекте.

Преимущества удаления неиспользуемого CSS-кода

Удаление неиспользуемого CSS-кода приносит следующие преимущества:

• Уменьшение размера CSS-файлов, что приводит к более быстрой загрузке страницы и улучшению производительности.
• Улучшение читаемости кода и упрощение его поддержки, поскольку удаляются неиспользуемые стили.
• Соблюдение принципа «Разделяй и Властвуй» (Separation of Concerns), поскольку в CSS-файлах остаются только используемые стили.

Как работает PurgeCSS?

PurgeCSS анализирует HTML-файлы проекта и определяет, какие CSS-селекторы используются. Затем он создает новую версию CSS-файла, содержащую только используемые стили. Этот процесс можно настроить, указав файлы для анализа и исключив определенные селекторы из удаления.

Пример настройки PurgeCSS

Вот пример настройки PurgeCSS в файле purge.config.js:

module.exports = { content: [ './src/**/*.html', './src/**/*.js', ], css: [ './src/styles.css', ], defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [], } 

В этом примере PurgeCSS будет анализировать HTML и JavaScript файлы в директории src и ее подпапках, а также CSS-файл styles.css. Настройка defaultExtractor определяет, как PurgeCSS будет извлекать селекторы из исходного кода.

Использование PurgeCSS с популярными CSS-фреймворками

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

PurgeCSS и Tailwind CSS

Tailwind CSS — это утилитарный CSS-фреймворк, который генерирует классы на основе утилитарных имен. По умолчанию Tailwind CSS содержит все возможные классы, что приводит к большому размеру CSS-файла. PurgeCSS идеально подходит для удаления неиспользуемых классов Tailwind CSS из окончательной сборки.

Настройка PurgeCSS для Tailwind CSS выглядит следующим образом:

module.exports = { content: [ './src/**/*.html', './src/**/*.js', ], theme: { // ... остальные настройки темы Tailwind CSS }, plugins: [ // ... остальные плагины Tailwind CSS ], } 

PurgeCSS и Bootstrap

Bootstrap — один из самых популярных CSS-фреймворков с богатым набором стилей и компонентов. Размер CSS-файла Bootstrap может быть значительным, поэтому PurgeCSS может помочь уменьшить его размер, удалив неиспользуемые стили.

Настройка PurgeCSS для Bootstrap может выглядеть следующим образом:

module.exports = { content: [ './src/**/*.html', './src/**/*.js', ], css: [ './node_modules/bootstrap/dist/css/bootstrap.min.css', ], defaultExtractor: (content) => content.match(/[\w-/:]+(?