Minificatore CSS

Cosa fa il minificatore

Trasformazioni (non cambiano il comportamento):

• Rimuovi commenti (tutti, compresi i blocchi /*! di licenza).
• Rimuovi spazi bianchi non necessari (tra selettori, dichiarazioni, parentesi graffe).
• Rimuovi punti e virgola finali prima delle parentesi graffe di chiusura.
• Riduci le regole multi-linea a una sola linea.

È tutto quello che fa, ed è per questo che l’output si comporta esattamente come l’originale: ogni selettore, proprietà e valore resta come l’hai scritto.

Risparmi tipici

Oltre alla minificazione, la compressione gzip sul server aggiunge un ulteriore risparmio del 60-80% perché il CSS è altamente ridondante. I due si sommano; fai sempre entrambi.

Cosa non fa la minificazione

• Rimuovi CSS non utilizzato. Questo è territorio di tree-shaking / PurgeCSS, che richiede di analizzare il tuo HTML o i componenti.
• Accorcia i colori esadecimali, riduce le unità zero o unisce le dichiarazioni. Quelle trasformazioni aggressive sono compito di cssnano, esbuild o Lightning CSS, non di questo strumento.
• Fondi selettori duplicati in uno. Rischioso perché l’ordine sorgente influisce sulla cascata; alcuni minificatori ci provano, la maggior parte lo salta.
• Rinomina classi. Questo è CSS-in-JS o CSS Modules, non minificazione.
• Includi CSS critico inline. Questo è un passaggio separato durante la build.

Preservare i commenti di licenza

Molti minificatori preservano i commenti che iniziano con /*!, utilizzati per le intestazioni di licenza:

/*! Bootstrap v5.3 · MIT License · https://github.com/twbs/bootstrap */

Questo strumento rimuove tutti i commenti. Se il tuo CSS contiene intestazioni di licenza, aggiungile di nuovo dopo la minificazione oppure usa uno strumento di build con opzione di conservazione delle licenze, come cssnano o esbuild.

Mappe sorgente

Per il debug in produzione, gli strumenti di build generano una mappa sorgente insieme all’output minificato:

styles.min.css
styles.min.css.map

DevTools può leggere la mappa e mostrarti i numeri di riga originali ben formattati quando ispezioni un elemento. Questo strumento non genera mappe sorgente.

Minificazione CSS in una pipeline di build

• Vite, Webpack, Parcel: gestiscono questo automaticamente nelle build di produzione.
• PostCSS con cssnano: il minificatore stand-alone standard.
• esbuild: include anche la minificazione CSS.
• preset cssnano: default per trasformazioni sicure, advanced per aggressive (con alcuni compromessi).

Questo strumento è per minificazioni una tantum, correzioni rapide e per imparare cosa fanno effettivamente i minificatori. Per un flusso di lavoro di produzione, utilizza uno strumento di build in modo che la tua sorgente rimanga leggibile e solo l’output sia minificato.

Quando la minificazione può rompere il tuo CSS

Raro ma possibile:

• Selettori sensibili agli spazi bianchi: .foo .bar vs. .foo.bar, lo spazio conta.
• Valori di proprietà personalizzati con spazi: --shadow: 0 2px 4px rgba(0,0,0,0.1), le virgole all’interno di rgba() non devono essere rimosse.
• Commenti di blocco non chiusi: /* mancante chiusura mangia tutto dopo di esso. I minificatori possono comportarsi male su input malformati.

La soluzione: esegui sempre il tuo output minificato attraverso un passaggio di lint/test prima di spedire.