Jak usunąć zbędny CSS

Od jakiegoś czasu szukałem narzędzia, które pozwoli mi oczyścić mój CSS z nieużywanych stylów. Dlaczego? Obecnie prawie każdy programista używa wielu frameworków i bibliotek CSS do szybszego i łatwiejszego tworzenia interfejsów, zatem znaczne zwiększenie rozmiaru plików CSS jest nieuchronne.

Jednak, ile CSS importowanego z bibliotek zewnętrznych jest w faktycznym użyciu? Czasem nawet mniej niż 20%. Po co więc reszta?

Purgecss

Tutaj z pomocą przychodzi Purgecss. Jest to narzędzie pomagające usunąć nieużywany CSS, które może być użyte jako część procesu developmentu.

Jak to działa? Musisz podać następujące informacje:

1. Plik CSS, który chcesz wyczyścić
2. Pliki, które należy sprawdzić
3. Ścieżka docelowa oczyszczonego pliku

Tak więc z początkowego pliku CSS [1] narzędzie to przeszuka pliki html [2], a następnie utworzy nowy plik CSS [3], zawierający tylko użyte style. Jestem pewien, że zmniejszysz rozmiar swojego CSS o ponad 60%!

Narzędzia do budowania

Fajną rzeczą w Purgecss jest to, że możesz go wpleść w proces rozwoju oprogramowania za pomocą wielu popularnych narzędzi do budowania:

• CLI
• JavaScript API
• Webpack
• Gulp
• Rollup

Frameworki JS

Purgecss można również używać z najnowocześniejszymi frameworkami JavaScript:

• React
• VueNext
• Nuxt

Jak używać Purgecss

Napisałem kiedyś artykuł o tym, jak skonfigurować proces kompilacji CSS z Gulpem przy użyciu Purgecss. Tutaj zademonstruję, jak użyć Purgecss z Gulp i Nuxt.js, ale z oficjalnej dokumentacji dowiesz się, jak wykorzystać to narzędzie na różne sposoby. 

Purgecss z Gulp

Najpierw zainstaluj pakiet z npm albo z yarn.

npm i -D gulp-purgecss

lub

yarn add gulp-purgecss

Następnie zaimportuj dodany pakiet w swoim gulpfile.js. 

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

Na koniec utwórz task:

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

Tak na marginesie, jeżeli Twój task działa w serii lub w sekwencji, pamiętaj, aby odpalić go po wygenerowaniu plików html. Jeśli tego nie zrobisz, pojawi się błąd. 

Purgecss z Nuxt.js

Fakt, że Purgecss działa z plikami html mnie wkurza, ponieważ w ostatnich miesiącach pracowałem przy różnych projektach z Nuxt.js i optymalizacja moich plików była dla mnie bardzo istotna.

Podczas czytania dokumentacji dotarło do mnie jednak, że Purgecss można użyć z większością obecnych frameworków JS, na przykład, Reactem, Vue, Next i Nuxt. 

Jak używać Purgecss w projektach z Nuxt

Zainstaluj następujące pakiety z npm lub yarn.

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

lub

yarn add glob-all purgecss-webpack-plugin

Następnie zaimportuj je w nuxt.config.js (poza export default).

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

Dodaj poniższy kod do swojej konfiguracji build, w obrębie export default.

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

I po kłopocie. Wypróbuj Purgecess i przekonaj się, jak bardzo zmniejszą się Twoje pliki. 

Oryginał tekstu w języku angielskim przeczytasz tutaj.