В настоящее время многие разработчики используют различные CSS-фреймворки и библиотеки для быстрой и простой сборки интерфейсов, что делает неизбежным увеличение размера CSS-файлов. Но задумывались ли когда-нибудь, сколько CSS-стилей вы импортируете из тех файлов, которые на самом деле используете? Оказывается, в большинстве проектов не более 20%. Так почему все эти неиспользуемый стиль должны быть частью вашего кода?
Ниже мы рассмотрим инструмент, который позволит очистить CSS-файлы вашего проекта от неиспользуемых стилей.
PurgeCSS
Одним из самых популярных инструментов является - PurgeCSS.
Данная библиотека помогает удалить неиспользуемый CSS, и её можно использовать в процессе сборки проекта.
PurgeCSS нужно сообщить следующие данные:
- файл CSS, который необходимо очистить;
- файлы HTML, которые нужно проверять;
- путь назначения нового сгенерированного файла.
Итак, из исходного CSS-файла (1) PurgeCSS будет искать в указанных HTML-файлах (2), а оттуда создавать новый CSS-файл (3) только с теми стилями, которые используются на html-страницах.
Инструменты сборки
Самое удобное в использовании PurgeCSS то, что её можно подключить непосредственно в процессе разработки с помощью таких популярных инструментов сборки, как:
- Webpack
- Gulp
- Grunt
- Rollup
Кроме того, её можно использовать с популярными JavaScript-фреймворками:
- React
- Vue
- Nuxt
Как работать с PurgeCSS
Далее покажем, как использовать PurgeCSS с Gulp и Vue.js. Настройка и интеграции с другими библиотеками подробно описаны в официальной документации.
PurgeCSS с Gulp
Для начала нужно установить пакет PurgeCSS с помощью npm или yarn:
npm i -D gulp-purgecss
или
yarn add gulp-purgecss
После этого в gulpfile.js нужно импортировать пакет, который только что добавили
const gulp = require('gulp'),
purgecss = require('gulp-purgecss');
и потом создать запрос следующим образом:
gulp.task('purgecss', () => {
return gulp
.src('src/**/*.css')
.pipe(
purgecss({
content: ['src/**/*.html']
})
)
.pipe(gulp.dest('build/'))
})
Важно! Запрос нужно выполнять последовательно, после генерации HTML-файла. В противном случае запрос выдаст ошибку.
PurgeCSS с Vue.js
Первым делом инициализируем пакет PurgeCSS в проект с помощью npm:
npm i --save-dev glob-all purgecss-webpack-plugin
далее необходимо добавить в webpack.prod.conf.js следующий код:
в 13-й строке:
// импортируем и подключаем PurgeCSS
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')
и в 58-й строке:
// Удаляем неиспользуемые CSS-стили с помощью PurgeCSS.
new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, './../src/index.html'),
path.join(__dirname, './../**/*.vue'),
path.join(__dirname, './../src/**/*.js')
])
}),
Например, на данном сайте без PurgeCSS стили bootstrap.css имеют размер 117 kB.
После подключения PurgeCSS размер нового сгенерированного файла составит 2.98 kB.
Получаем уменьшение на более 90%!