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

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

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

Purgecss

Вот где Purgecss приходит на помощь. Это инструмент, который помогает удалить неиспользуемый CSS, и его можно применять как часть вашего рабочего процесса разработки. Вот как Purgecss работает под капотом — ему нужно знать следующее:

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

Просто. Я уверена, что если вы попробуете его, то сможете уменьшить файл до 60%.

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

Удивительный факт о Purgecss заключается в том, что вы можете реализовать его в своем рабочем процессе разработки с помощью множества популярных инструментов сборки, таких как:

Кроме того, вы также можете использовать его с самыми современными средами JavaScript, такими как:

Как использовать Purgecss

Ниже мы покажем, как реализовать Purgecss с Gulp и Nuxt.js, но вы можете прочитать здесь официальную документацию, чтобы узнать, как его настроить по-разному.

Purgecss с Gulp

Изначально вам необходимо установить пакет с 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

В начале, когда я увидела, что Purgecss работает с HTML-файлами, я расстроилась, потому что в последние месяцы я занимаюсь разработкой различных проектов с помощью Nuxt.js, и для меня очень важно оптимизировать файлы. Но, изучая документацию, я обнаружила, что вы можете выполнить Purgecss с самыми современными JS-фреймворками, такими как React, Vue, Next и Nuxt.

Во-первых, вам нужно установить следующие пакеты в проект с помощью 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'] }) ) } }
}

И все готово! Это все, что вам нужно сделать, чтобы удалить неиспользуемый CSS.

Автор: Alicia Newman

Источник: https://learnworthy.net

Редакция: Команда webformyself.