Nasza strona używa cookies. Korzystając ze strony, wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki. Rozumiem

Jak usunąć zbędny CSS

Luca Spezzano Creative Frontend Developer / Starteed
Poznaj Purgecss, czyli narzędzie pozwalające na zmniejszenie rozmiaru plików CSS i sprawdź, jak z niego korzystać.
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.

Lubisz dzielić się wiedzą i chcesz zostać autorem?

Podziel się wiedzą z 160 tysiącami naszych czytelników

Dowiedz się więcej