PurgeCSS позволяет уменьшить CSS код проекта на 60% и это не предел

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

Зачем он мне понадобился? Наверное, потому что подавляющее большинство разработчиков (в том числе и я) пользуются различными CSS фреймворками и библиотеками, позволяющими без лишних трудозатрат создавать элементы интерфейсов, что, в свою очередь, неизбежно приводит к значительному увеличению размеров CSS файлов.

Возникает вопрос: какое количество стилей, импортируемых из внешних ресурсов, действительно используются в проекте? Порой менее 20%. Зачем в таком случае необходимо сохранять невостребованные стили? Для этого нет никакой причины.

Purgecss

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

Как же он работает? Разберемся с этим вопросом. Итак, нам нужны:

1. CSS файл, который мы хотим оптимизировать
2. файл, с помощью которого осуществляется проверка
3. путь, по которому сохранится, новый сгенерированный файл.

Например, начальный CSS файл [1] проверяется с помощью HTML файла [2], на выходе создается CSS файл [3], содержащий только те стили, которые действительно используются в HTML файле [2].

Я уверен, что Ваш эксперимент с этим инструментом позволит уменьшить размер CSS более чем на 60%.

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

Хорошая новость: PurgeCSS взаимодействует с различными популярными инструментами сборки:

• CLI
• JavaScript API
• Webpack
• Gulp
• Rollup

JS фреймворки

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

• React
• Vue
• Next
• Nuxt

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

Рассмотрим варианты интеграции PurgeCSS с Gulp и Nuxt.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/'))
})

PS: не забудьте запустить эту задачу после того, как создадите HTML файлы, в противном случае Вы можете получить ошибку.

PurgeCSS и Nuxt.js

Для начала установите необходимые пакеты с помощью npm или yarn.

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

или

yarn add glob-all purgecss-webpack-plugin

Импортируйте установленные пакеты в файле nuxt.config.js:

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']
        })
      )
    }
  }
}

И это все!

Создано по материалам оригинальной статьи Luca Spezzano “How to Remove Unused CSS”