Utilizzo di PostCSS per l'ottimizzazione e l'ottimizzazione

Nell'ultimo tutorial hai imparato come utilizzare PostCSS per rendere i tuoi fogli di stile più compatibili con più browser, in particolare affrontando problemi derivanti dal supporto per versioni legacy di IE.

In questo tutorial impareremo come rendere più efficienti i tuoi fogli di stile e caricarli più velocemente, utilizzando PostCSS per eseguire varie operazioni di ottimizzazione e ottimizzazione.

Imparerai come:

Combina più fogli di stile in uno tramite il @importare regola, anche se alcuni dei tuoi fogli di stile provengono da componenti Bower o moduli npm, assicurandoti di averne bisogno solo uno http richiesta di caricare il CSS del tuo sito.
Combina le query multimediali corrispondenti in una sola, consentendo di utilizzare la stessa query multimediale in più posizioni durante lo sviluppo, ma con l'efficienza delle query consolidate nel foglio di stile finale.
Usa il pacchetto cssnano per eseguire tutti i tipi di ottimizzazione dallo stripping dello spazio bianco e dei commenti alla minimizzazione di determinati tipi di codice e molto altro.

Iniziamo!

Imposta il tuo progetto

La prima cosa che devi fare è impostare il tuo progetto in modo che utilizzi Gulp o Grunt, a seconda delle tue preferenze. Se non hai già una preferenza per l'uno o l'altro, ti consiglio di utilizzare Gulp in quanto avrai bisogno di meno codice per raggiungere gli stessi fini, quindi dovresti trovare un po 'più semplice lavorare con.

Puoi leggere come configurare i progetti Gulp o Grunt per PostCSS nelle esercitazioni precedenti

Guida rapida per PostCSS: Gulp Setup o
Guida rapida per PostCSS: installazione Grunt

rispettivamente.

Se non si desidera configurare manualmente il progetto da zero, è possibile scaricare i file sorgente allegati a questo tutorial ed estrarre il progetto di avviamento Gulp o Grunt in una cartella di progetto vuota. Quindi con un terminale o un prompt dei comandi puntato verso la cartella esegui il comando installazione di npm.

Installa i plugin

Per questo tutorial utilizzeremo due singoli plugin, oltre a un pacchetto di plug-in. Installali eseguendo il seguente comando all'interno della cartella del tuo progetto:

npm install postcss-import css-mqpacker cssnano --save-dev

Ora i plugin sono installati, andiamo avanti e li cariciamo nel tuo progetto.

Carica i plugin via Gulp

Se stai usando Gulp, aggiungi queste variabili sotto le variabili già presenti nel file:

var atImport = require ('postcss-import'); var mqpacker = require ('css-mqpacker'); var cssnano = require ('cssnano');

Ora aggiungi ognuno di questi nuovi nomi di variabili nel tuo processori array:

 processori var = [atImport, mqpacker, cssnano];

Fai un rapido test per verificare che tutto funzioni eseguendo il comando gulp css quindi controlla che un nuovo file "style.css" sia apparso nella cartella "dest" del tuo progetto.

Carica i plugin via Grunt

Se stai usando Grunt, aggiorna il processori oggetto, che è annidato sotto il opzioni oggetto, al seguente:

 processori: [require ('postcss-import') (), require ('css-mqpacker') (), require ('cssnano') ()]

Fai un rapido test per verificare che tutto funzioni eseguendo il comando grunt postcss quindi controlla che un nuovo file "style.css" sia apparso nella cartella "dest" del tuo progetto.

Questo ha tutti i plugin installati e caricati, quindi passiamo ad imparare come usarli per la minimizzazione e l'ottimizzazione.

In linea / Combina file con @import

Anziché caricare singolarmente più fogli di stile, è più efficiente laddove possibile combinare i fogli di stile in uno solo.

Ad esempio, l'uso di Normalize.css è molto comune, ma, se lo si carica come foglio di stile autonomo prima del foglio di stile principale, richiede più http richieste, rallentando quindi il tempo di caricamento.

Tuttavia, se si utilizza il plugin postcss-import di Maxime Thirouin, è possibile combinare Normalize.css nel foglio di stile principale, tramite l'uso del @importare regola, dandoti lo stesso CSS con uno solo http richiesta.

@import then Inline Normalize.css

Andiamo avanti e facciamo questo ora, importando e quindi inserendo Normalize.css nel foglio di stile del nostro progetto. Inizia scaricando "normalize.css" nella cartella "src" del tuo progetto, da https://necolas.github.io/normalize.css/

Nella parte superiore del tuo file "src / style.css" aggiungi la seguente riga:

@import 'normalize.css';

Poiché hai già installato postcss-import, è tutto ciò che devi fare. Vedrà il @importare regola e allinea automaticamente il codice dal file normalize.css nel foglio di stile.

Compila il tuo file e quando guardi il tuo file "dest / style.css" dovresti vedere l'intero contenuto di "normalize.css" al suo interno:

/ *! normalize.css v3.0.2 | Licenza MIT | git.io/normalize * / html font-family: sans-serif; ...

È possibile utilizzare questo stesso processo per combinare tutti i fogli di stile separati necessari. Basta posto @importare linee nel tuo file "src / style.css" dove vuoi inserire il codice inserito.

Rilevazione automatica dei componenti Bode e Node Module

Una caratteristica molto utile di questo plugin è la sua capacità di scoprire automaticamente i file CSS situati all'interno della cartella "bower_components" o "node_modules".

Ad esempio, invece di scaricare manualmente "normalize.css" come abbiamo fatto in precedenza, potresti semplicemente eseguire il comando bower install normalize.css --save nel tuo progetto. Questo scaricherà automaticamente l'ultimo file "normalize.css" nella cartella "bower_components / normalize.css".

Nota: Se non hai configurato Bower sul tuo computer, scopri come.

Nella parte superiore del foglio di stile, ora potresti utilizzare questa linea:

@import 'normalize.css / normalize.css';

Il plugin postcss-import cercherà all'interno della cartella "bower_components" e troverà "normalize.css", quindi procederà ad inserirlo come nell'esempio precedente.

Lo stesso processo può essere seguito per tutti i fogli di stile presenti nella cartella "node_modules", ovvero è possibile utilizzare Bower o npm per gestire download, gestione delle dipendenze e aggiornamenti. Quando si utilizza uno dei due servizi, questo plugin offre un modo semplice per combinare file CSS di terze parti nei propri fogli di stile.

Modi per sfruttare @import Inlining

Inlining in questo modo i file CSS importati non è solo un modo molto efficace per combinare file provenienti da fonti diverse, come i componenti Bower, ma ti dà anche la possibilità di organizzare il tuo progetto in più fogli di stile separati.

Ad esempio, è possibile creare un file per controllare il layout e un altro per controllare la combinazione di colori. Se volessi cambiare la combinazione di colori, potresti seguire un processo come questo:

Duplica il foglio di stile del colore originale
Modificalo con nuovi codici colore
Importa il nuovo foglio di stile del colore nel tuo progetto
Compilare per creare fogli di stile colorati alternativi

È quindi possibile ripetere questo processo tutte le volte che si desidera, rendendo più efficiente la creazione di più combinazioni di colori per lo stesso design.

Alcuni progetti utilizzano fogli di stile separati per fornire più schemi di colori come questo, ma nel processo creano rallentamenti aggiunti http richieste. Con questo approccio finisci sempre con uno solo http richiesta, nonostante abbia molta libertà in ciò che potrebbe essere incluso nel tuo singolo foglio di stile.

Maggiori informazioni su postcss-import su: https://github.com/postcss/postcss-import

Combina query multimediali corrispondenti

Il plugin css-mqpacker di Kyo Nagashima trova le query multimediali corrispondenti nel tuo foglio di stile e le combina in un unico. Ciò ti consente di organizzare il tuo CSS come preferisci nei tuoi fogli di stile di sviluppo, ripetendo le query multimediali se necessario, senza preoccuparti di eventuali perdite di efficienza nel foglio di stile di produzione.

Mettiamo insieme un esempio del tipo di caso d'uso in cui potresti voler ripetere le query multimediali, ad esempio se stai organizzando separatamente il layout e le immagini del tuo design. In un progetto reale questo potrebbe significare utilizzare file completamente separati, uno per il layout e uno per i visual, ma per semplicità lo faremo tutti nel nostro file "src / style.css".

Inizieremo con un codice di layout. Aggiungeremo un .colonna classe che ne farà due 50% le colonne di larghezza sono affiancate, per impostazione predefinita. Quindi utilizzeremo una query multimediale per farli impilare uno sopra l'altro a dimensioni più piccole. Aggiungi questo codice al tuo foglio di stile:

/ * LAYOUT * / .column width: 50%; fluttuare: a sinistra;  @media (larghezza massima: 50rem) .column larghezza: 100%; float: none;

Successivamente aggiungeremo alcuni elementi grafici per impostare un bordo grigio attorno alle nostre colonne. La prima colonna avrà la classe .column_one e il secondo avrà la classe .column_two. Utilizzeremo la stessa query multimediale come abbiamo fatto con il nostro layout per cambiare il modo in cui applichiamo un bordo alle nostre colonne, a seconda che stiano seduti uno accanto all'altro o uno sopra l'altro.

Aggiungi questo codice al tuo foglio di stile:

/ * VISUALS * / .column_one, .column_two border: 0.0625rem solid #ccc;  .column_two border-left: 0;  @media (larghezza massima: 50rem) .column_one, .column_two border: 0.0625rem solid #ccc;  .column_two border-top: 0;

Ora ricompila il tuo file "src / style.css" e dai un'occhiata al contenuto "dest / style.css" risultante.

Come puoi vedere nel codice qui sotto, il plugin css-mqpacker ha identificato le due query media corrispondenti e le ha combinate in una:

/ * LAYOUT * / .column width: 50%; fluttuare: a sinistra;  / * VISUALS * / .column_one, .column_two border: 0.0625rem solid #ccc;  .column_two border-left: 0;  @media (larghezza massima: 50rem) .column larghezza: 100%; float: none;  .column_one, .column_two border: 0.0625rem solid #ccc;  .column_two border-top: 0;

Nota: Il codice sopra verrà ridotto nel tuo file "dest / style.css" a causa del plugin cssnano. Per vedere il codice non risolto, commentare temporaneamente cssnano dal tuo Gulpfile o Gruntfile's processori schieramento.

Maggiori informazioni su css-mqpacker su https://github.com/hail2u/node-css-mqpacker

cssnano Plugin Pack

Per l'ottimizzazione CSS completa e multiforme, il pacchetto cssnano di Ben Briggs è un'opzione molto potente, ma che è praticamente plug and play. Raggruppa circa venticinque plugin e può eseguire un numero impressionante di diversi tipi di ottimizzazione.

Tra una lunga lista di ottimizzazioni, può:

Elimina gli spazi bianchi e il punto e virgola finale
Rimuovi commenti
Ottimizza i pesi dei font
Elimina le regole duplicate
Ottimizzare Calc () uso
Ministri selettori
Riduci al minimo le proprietà a mano lunga
Unisci regole

Stiamo elaborando un codice di esempio nel progetto che vedrà tutte le ottimizzazioni sopra indicate applicate.

Aggiungi questo codice al tuo file "src / style.css":

.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano / * Questo è un esempio di cssnano in action * / font-weight: normal; margin-top: 1rem; margin-bottom: 2rem; margin-left: 1.5rem; margine-destra: 2.5rem; font-weight: normal; imbottitura: 1,75 m; larghezza: calc (50rem - (2 * 1.75rem));  a text-decoration: none; font-weight: bold;  p font-weight: bold;

Quindi ricompila il tuo file.

Nota: potresti voler commentare qualsiasi codice che hai già, in modo da poter vedere chiaramente i risultati.

Nel tuo file "dest / style.css" dovresti vedere ora il codice ottimizzato:

.css_nano, .css_nano + p, [class * = css_nano] margin: 1rem 2.5rem 2rem 1.5rem; font-weight: 400; padding: 1.75rem; width: 46.5rem a text-decoration: none a, p font-weight: 700

Dai un'occhiata all'elenco delle ottimizzazioni menzionate nella lista puntata qui sopra, quindi confronta il codice di esempio prima e dopo la compilazione per vedere come ciascuna di queste modifiche ha luogo:

Spazio bianco, commenti e punto e virgola finale sono spariti
font-weight: normale e font-weight: bold sono convertiti in font-weight: 400 e font-weight: 700
La seconda istanza ripetuta della regola font-weight: normal; è stato rimosso dal .css_nano stile
Il Calc () la proprietà è stata ridotta a un valore statico
I selettori .css_nano, .css_nano + p, [class * = "css_nano"], .css_nano sono stati ridotti a .css_nano, .css_nano + p, [class = * css_nano]
Le proprietà a mano lunga margin-top: 1rem; margin-bottom: 2rem; margin-left: 1.5rem; margine-destra: 2.5rem; sono stati ridotti a margine: 1rem 2.5rem 2rem 1.5rem;
Il un e p gli stili sono stati uniti per condividere il loro comune font-weight: 700; ambientazione

Per un elenco completo delle ottimizzazioni, cssnano fornisce il check-out: http://cssnano.co/optimisations/

Configurazione delle opzioni e Disabilitazione dei moduli

Esistono diversi plugin indipendenti utilizzati dal pacchetto cssnano e potresti voler configurare le impostazioni per o disabilitare completamente alcune di esse.

Per disabilitare un plugin, passa il suo nome nelle opzioni per cssnano con l'impostazione "false" applicata. Ad esempio, se non si desidera ottimizzare i pesi dei font, impostare quanto segue in Gulpfile / Gruntfile:

// In array di processori Gulpfile cssnano (minifyFontWeight: false) // In array 'processors' di Gruntfile require ('cssnano') (minifyFontWeight: false)

Puoi seguire lo stesso approccio per configurare le opzioni per un plugin, dando prima il nome del plugin e poi impostando le sue opzioni.

Ad esempio, puoi impostare la precisione, (numero di posizioni decimali), che il plugin calc dovrebbe usare. Di default calc (100% / 2.76) ti darei 36,23,188 mila%. Ma se volessi tagliare quella precisione fino a due cifre decimali potresti farlo in questo modo:

// In array di processori Gulpfile cssnano (calc: precision: 2) // In array 'processors' di Gruntfile require ('cssnano') (calc: precision: 2)

Il valore di calcolo ora verrà visualizzato 36.23%.

Per maggiori informazioni sulle opzioni di cssnano visita: http://cssnano.co/options

Ricapitolazione rapida

Diamo una carrellata di ciò che abbiamo spiegato sopra:

Il plugin postcss-import ti offre un modo efficace per i fogli di stile in linea.
Può essere utilizzato per combinare fogli di stile di terze parti, anche attraverso il rilevamento automatico nella cartella "bower_components" o "npm_modules".
Può essere utilizzato per consentire di dividere i fogli di stile in parti, quindi ricombinarli in un secondo momento.
Il plugin css-mqpacker ti consente di duplicare le query multimediali in modo da poter organizzare il tuo CSS come preferisci, anche in file separati, e poi avere tutte le query multimediali corrispondenti nel tuo foglio di stile finale.
Il pacchetto cssnano riunisce circa 25 diversi plugin, dando accesso plug and play a una lunga lista di funzioni di ottimizzazione e di ottimizzazione.
Può essere configurato per utilizzare qualsiasi plugin incluso, con le opzioni che desideri.

Su Successivo: Pre-elaborazione con PreCSS

Nel prossimo tutorial ci immergeremo nell'uso di PostCSS per la pre-elaborazione tramite un eccellente pacchetto di plug-in denominato PreCSS. Questo pacchetto dà accesso immediato alla sintassi e alle funzionalità di Sass, con variabili, mixin, condizionali, estensioni e altro.

Ci vediamo nel prossimo tutorial!

Web design