Удаление «мертвого» CSS: инструменты для чистки стилей

За 10 лет работы фронтенд-разработчиком я убедился, даже небольшой проект обрастает тоннами ненужного CSS. Вчерашние стили для удаленных компонентов, экспериментальные классы, устаревшие анимациию. Все это превращается в «мертвый код», который тормозит загрузку страниц и усложняет поддержку. В этой статье я покажу, как эффективно чистить CSS с помощью PurgeCSS, Lightning CSS и анализа Coverage в Chrome DevTools, поделюсь примерами из реальных проектов и сравню инструменты в детальной таблице.

Что такое «мертвый» CSS и почему он опасен?

Мертвый CSS это стили, которые прописаны в ваших файлах, но не используются ни на одной странице сайта. Например:

• Классы из удаленного HTML-компонента.
• Устаревшие стили после редизайна.
• Вендорные префиксы для браузеров, которые вы больше не поддерживаете.

Проблемы, которые он создает:

• Медленная загрузка страниц: Каждый лишний килобайт CSS увеличивает время загрузки.
• Путаница в коде: Чем больше ненужных стилей, тем сложнее вносить изменения.
• Падение SEO: Google учитывает скорость сайта в ранжировании.

Средний размер CSS на сайте 70 КБ, но 35% из них не используются. Давайте это исправим!

Инструмент 1: PurgeCSS

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

PurgeCSS анализирует HTML, JavaScript и шаблоны (например, React, Vue), находит используемые классы и удаляет несоответствующие стили из CSS.

Настройка PurgeCSS (пример для Webpack)

1. Установите пакет:

npm install purgecss-webpack-plugin --save-dev

2. Добавьте в webpack.config.js:

const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');

module.exports = {
  plugins: [
    new PurgeCSSPlugin({
      paths: glob.sync(`src/**/*`, { nodir: true }),
      safelist: ['custom-safe-class'] // Классы, которые нужно сохранить
    })
  ]
};

Пример до и после

Исходный CSS:

.button { padding: 10px; }
.old-button { margin: 5px; } /* Мертвый стиль */

После PurgeCSS:

.button { padding: 10px; }

Ловушки и как их избежать

• Динамические классы: Если класс генерируется через JavaScript (например, classNames('btn-${color}')), добавьте регулярное выражение в safelist:

safelist: [/^btn-/]

• Стили для третьих сторон: Используйте css: ['react-datepicker'] для включения внешних библиотек.

Инструмент 2: Lightning CSS

Что такое Lightning CSS?

Это инструмент от разработчиков Parcel, который не только минифицирует CSS, но и удаляет дубликаты, объединяет медиа-запросы и автоматически вычищает неиспользуемые стили.

Интеграция с NPM

1. Установите пакет:

npm install lightningcss

2. Создайте скрипт для обработки CSS:

const { transform } = require('lightningcss');

const { code } = transform({
  filename: 'styles.css',
  code: Buffer.from(`
    .unused-class { color: red; }
    .active { font-weight: bold; }
  `),
  minify: true,
  exclude: /unused-class/ // Явное исключение
});

console.log(code.toString()); // Вывод: .active{font-weight:700}

Плюсы Lightning CSS

• Скорость: Обрабатывает 10 000 строк за 15 мс (в 5 раз быстрее PostCSS).
• Встроенная оптимизация: Не требует ручной настройки.

Инструмент 3: Анализ Coverage в Chrome DevTools

Пошаговая инструкция

1. Откройте Chrome → F12 → вкладка Coverage (Во вкладке «Дополнительные инструменты»).
2. Нажмите Начать запись и перезагрузите страницу.
3. Красным выделены неиспользуемые стили. Кликните на файл CSS, чтобы увидеть детали.

Как интерпретировать результаты?

• Не удаляйте стили для модальных окон и попапов сразу: Они могут не загружаться при первом рендере.
• Проверьте все состояния: Убедитесь, что вы проверили :hover, :active и динамические классы.

Сравнение инструментов

Рекомендации

1. Комбинируйте инструменты: Используйте PurgeCSS для сборки, а Coverage — для еженедельного аудита.
2. Не доверяйте слепо автоматике: Всегда проверяйте стили после удаления на разных страницах.
3. Оптимизируйте третьи библиотеки: Например, Bootstrap можно кастомизировать, чтобы не тащить все 200 КБ.

Удаление мертвого CSS не разовая акция, а привычка. Начните с Coverage, чтобы найти «жирные» места, внедрите PurgeCSS в сборку, а для небольших проектов попробуйте Lightning CSS. Помните, каждый удаленный килобайт это плюс к скорости и юзабилити вашего сайта.