Cos’è la minificazione di un file

Per minimizzazione dei file JavaScript, CSS e HTML si intende l’ottimizzazione e l’eliminazione dei caratteri superflui che ai fini del corretto funzionamento dei file sono superflui. Si tratta di eliminare dati superflui come gli spazi, le interruzioni di riga, i commenti, ecc. che servono solo allo sviluppatore per rendere il codice più leggibile. In generale, minimizzare un file significa eliminare tutte quelle informazioni che possono essere eliminate senza che il suo funzionamento venga compromesso.

Lo scopo della minimizzazione è quello di ottimizzare i file, renderli più veloci e più leggeri (riducendo i dati da scaricare). Questo tipo di processo può essere considerato come un aspetto più specifico della compressione, in quanto oltre a rendere i file più leggeri (riducendo i dati da scaricare), ottimizza i file e li rende più veloci. A differenza della compressione, con la minimizzazione il browser per leggere un file minimizzato non deve decomprimerlo come avverrebbe con un file compresso (ad esempio un .zip). La minimizzazione può essere visto in qualche modo come una sorta di offuscamento del codice, ma differisce per l’obiettivo che si pone di raggiungere (per approfondire: L’offuscamento del codice sorgente di un software).

Vantaggi della minimizzazione di un file

I vantaggi della minimizzazione sono molteplici:

  1. Velocizza il download dei file e il caricamento della pagina web grazie a file più leggeri;
  2. File ottimizzati e più performanti;
  3. Meno consumo di banda.

Tra tutti i vantaggi offerti della minimizzazione, forse l’ultimo è quello più importante, non si tratta solo di un problema di dimensioni dei file che può essere di pochi KB ma del numero di richieste per quel file. Siti con miliardi di accessi giornalieri, come Facebook e Google, riducendo la dimensione dei file, anche di soli pochi KB, consente un consumo di banda e un consumo di energia estremamente inferiore.

La minification, in inglese, non può essere applicata a qualsiasi linguaggio, basti pensare a Phyton che utilizza l’indentazione per creare i blocchi di elementi, eliminarli renderebbe il software inutilizzabile.

Vediamo un esempio, dato il seguente CSS:

    div {
        line-height: 2;
    }

    .mia-classe {
        min-height: 40px;
        padding: 0px;
        display: table;
        vertical-align: middle;
    }

    h1, h2, h3 {
        background-color: black
        color: white;
    }

    span {
        background: blue;
    }

Il processo di minimizzazione lo trasforma nel seguente codice che dal punto di vista del browser e del funzionamento è perfettamente identico:

div{line-height:2}.mia-classe{min-height:40px;padding:0;display:table;vertical-align:middle}h1,h2,h3{background-color:#000;color:#fff}span{background:blue}

Come è possibile vedere sono stati eliminati tutti gli spazi e i punti e virgola dove possibile, sono state eliminate le interruzioni di riga e i riferimenti ai colori sono stati sostituiti con i codici esadecimale. Un ottimo tool online per la minimizzazione dei file CSS è CSS Compressor, dalle opzioni è possibile scegliere anche il livello di minimizzazione, se più compresso e meno leggibile, o più leggibile ma meno compresso, ecc. CSS Compressor fornisce inoltre delle statistiche sul codice inserito, per il codice sopra riportato dai 244 bytes iniziali si è ridotto il codice a 155 bytes con un risparmio del 57.42%.

Esempio minificazione

E’ stato stimato che la compressione Gzip è in grado di comprimere un file del 60%, la minificazione invece riduce i file del 10-15%. Per questo motivo è consigliato sfruttare entrambe le funzionalità per ridurre il caricamento elle pagine web. In commercio esistono moltissimi software in grado di minimizzare i file tra cui, oltre a CSS Compressor, ci sono UglifyJS, Google’s Closure Compiler, Yahoo! YUI Compressor e Pretty Diff.

Pubblicato in CSS, Front-end, JavaScript Taggato con: ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*