Уменьшение размера CSS с помощью PurgeCSS

PurgeCSS позволяет сократить размер CSS кода проекта на 60% и более. Долгое время я искал инструмент, который мог бы избавить мой CSS от неиспользуемых стилей.

Зачем это нужно?

Большинство разработчиков (включая меня) используют различные CSS фреймворки и библиотеки для упрощения создания элементов интерфейсов. Это приводит к значительному увеличению размеров CSS файлов. Однако, на практике часто используется менее 20% импортированных стилей. Поэтому нет необходимости сохранять невостребованные стили.

Что такое PurgeCSS?

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

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

Для работы с PurgeCSS вам потребуются:

1. CSS файл, который нужно оптимизировать.
2. Файл (например, HTML), по которому будет проверяться использование стилей.
3. Путь для сохранения нового, оптимизированного CSS файла.

Пример: начальный CSS файл проверяется с помощью HTML файла, и на выходе создается новый CSS файл, содержащий только используемые стили.

Инструменты сборки

PurgeCSS интегрируется с различными популярными инструментами сборки, такими как:

• CLI
• JavaScript API
• Webpack
• Gulp
• Rollup

Работа с JS фреймворками

PurgeCSS можно использовать с современными JavaScript фреймворками, такими как:

• React
• Vue
• Next
• Nuxt

Как работать с PurgeCSS

Рассмотрим примеры интеграции PurgeCSS с Gulp и Nuxt.js. Остальные методы интеграции можно изучить в официальной документации.

PurgeCSS и Gulp

1. Установите пакет PurgeCSS с помощью npm или yarn:

npm i -D gulp-purgecss

yarn add gulp-purgecss

const gulp = require('gulp');
const purgecss = require('gulp-purgecss');

gulp.task('purgecss', () => {
return gulp
.src('src/**/*.css')
.pipe(purgecss({
content: ['src/**/*.html']
}))
.pipe(gulp.dest('build/'));
});

npm i --save-dev glob-all purgecss-webpack-plugin

yarn add glob-all purgecss-webpack-plugin

import PurgecssPlugin from 'purgecss-webpack-plugin';
import glob from 'glob-all';
import path from 'path';

build: {
extractCSS: true,
extend(config, { isDev, isClient }) {
if (!isDev && isClient) {
config.plugins.push(
new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, './pages/**/*.vue'),
path.join(__dirname, './layouts/**/*.vue'),
path.join(__dirname, './components/**/*.vue')
]),
whitelist: ['html', 'body']
})
);
}
}
}