Меню

Как убрать неиспользуемый CSS?

Опубликовано 26.09.2019

В настоящее время многие разработчики используют различные CSS-фреймворки и библиотеки для быстрой и простой сборки интерфейсов, что делает неизбежным увеличение размера CSS-файлов. Но задумывались ли когда-нибудь, сколько CSS-стилей вы импортируете из тех файлов, которые на самом деле используете? Оказывается, в большинстве проектов не более 20%. Так почему все эти неиспользуемый стиль должны быть частью вашего кода?

Ниже мы рассмотрим инструмент, который позволит очистить CSS-файлы вашего проекта от неиспользуемых стилей.

PurgeCSS

Одним из самых популярных инструментов является - PurgeCSS.

Данная библиотека помогает удалить неиспользуемый CSS, и её можно использовать в процессе сборки проекта.

PurgeCSS нужно сообщить следующие данные:

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

Итак, из исходного 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%!

Поделиться: