Con uncss, metti a dieta i tuoi fogli di stile

Unc è uno strumento sotto Node.js che ti permette di analizzare i fogli di stile in relazione all'uso che ne fai sul tuo sito e rimuovere tutte le regole non necessarie in modo da ridurne drasticamente il peso e quindi velocizzarne il caricamento!
Vediamo come funziona, se è davvero efficace e come utilizzarlo.

Come funziona?

Sviluppato da Giacomo Martino da aprile 2013, il suo funzionamento è abbastanza semplice. All'avvio, lo strumento si avvia a Phantomjs per scansionare la pagina HTML di destinazione, recupera tutte le regole CSS esistenti, controlla per ognuna di esse che ci sia un nodo DOM nella pagina corrispondente e, in caso contrario, cancella questa regola inutile.

Leggendo questa spiegazione, probabilmente stai già pensando che non funziona con stili o nodi html aggiunti dinamicamente e in parte hai ragione. Se lo stile o il nodo non è nella pagina all'avvio (in html o aggiunto all'onload in JavaScript) uncss lo considererà inutile e lo cancellerà. Fortunatamente, ci sono diversi modi per parlarne delle eccezioni. Torneremo su questo nella terza parte di questo articolo.

È davvero efficace?

Prendi l'esempio del sito web JS Repubblica, si incorpora nel framework CSS Normalizzare, Scheletro et Animate.css. Concatenato e minimizzato con codice site-specific, il foglio di stile risultante pesa 104 KB senza uncss. Con uncss il foglio diventa più leggero e passa a 27 KB!
O un aumento di peso di più di 60%

Come si usa?

Ci sono integrazioni con Gulp e Grunt, ma in questo articolo mi sto concentrando su un esempio di Gulp.
Ecco un semplice esempio di utilizzo in un file gulpfile.js (ovviamente, non dimenticare di installarlo tramite npm installa gulp-uncss –save-dev prima di provare ad usarlo)

const uncss = require('gulp-uncss');
gulp.task('css', () =&gt;
    gulp.src('public/css/**/*.css')
        .pipe(uncss({
            html: ['public/index.html'],
            ignore: [/^#konami-overlay/]
        }))
        .pipe(gulp.dest('build/public/css'));
);

Avrai notato la proprietà html che consente a uncss di specificare i file html (o l'URL) da scansionare oltre alla proprietà ignorare che permette di definire selettori CSS da ignorare durante il filtraggio.
Questi selettori possono essere forniti in formato testo o, cosa più interessante, sotto forma di espressione regolare. Questo ha il vantaggio di poter abbinare un gruppo di regole in una riga. Nel nostro esempio, escludiamo tutte le regole CSS con un selettore che inizia con "#konami-overlay".
Per saperne di più sullo strumento e sul suo utilizzo, vi invito a consultare il documentazione uncss.
Matteo Bretone CTO a JS Repubblica
[tipo separatore=”” size=”” icon=”stella”] [actionbox color=”default” title=”” description=”JS-REPUBLIC è una società di servizi specializzata nello sviluppo di JavaScript. Siamo un centro di formazione riconosciuto. Trova tutta la nostra formazione tecnica sul nostro sito partner dedicato alla Formazione” btn_label=”La nostra formazione” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external =”1″]