Gzip contro minify

L'altro giorno ho avuto una discussione piuttosto vivace sulla minimizzazione di Javascript e CSS rispetto a qualcuno che preferisce usare Gzip.

Chiamerò questa persona X.

X ha detto che Gzip minimizza già il codice, poiché comprime i file.

Non sono d'accordo. Zip è un metodo senza perdita di riduzione delle dimensioni dei file. Lossless significa che l'originale deve essere ripristinato perfettamente, il che significa che le informazioni devono essere archiviate per poter ripristinare gli spazi, i caratteri non necessari, il codice commentato e tutto il resto. Ciò occupa più spazio, poiché è necessario comprimerne di più.

Non ho un metodo di test, ma credo che il Gzip di questo codice:

.a1 {
    background-color:#FFFFFF;
    padding: 40px 40px 40px 40px;
}

Sarà ancora più grande del Gzip di questo codice:

.a1{body:background-color:#FFF;padding:40px}

C'è qualcuno che può dimostrare questo giusto o sbagliato.
E per favore non venire dicendo "È giusto perché è quello che ho sempre usato".

Sto chiedendo prove scientifiche qui.

Molto semplice da testare. Ho preso i tuoi js, li ho messi in file diversi e ho eseguito gzip -9 su di essi. Ecco il risultato. Ciò è stato fatto su una macchina WinXP con Cygwin e gzip 1.3.12.

-rwx------  1 xxxxxxxx mkgroup-l-d     88 Apr 30 09:17 expanded.js.gz

-rwx------  1 xxxxxxxx mkgroup-l-d     81 Apr 30 09:18 minified.js.gz

Ecco un ulteriore test usando un esempio JS del mondo reale. Il file di origine è "common.js" La dimensione del file originale è 73134 byte. Minimizzato, arrivò a 26232 byte.

File originale:

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 73134 Apr 13 11:41 common.js

File minimizzato:

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d 26232 Apr 30 10:39 common-min.js

File originale compresso con l'opzione -9 (stessa versione di cui sopra):

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 12402 Apr 13 11:41 common.js.gz

File minimizzato con gzip con l'opzione -9 (stessa versione di cui sopra):

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d  5608 Apr 30 10:39 common-min.js.gz

Come puoi vedere, c'è una netta differenza tra i vari metodi. La scommessa migliore è minimizzare e decomprimere.

Ecco i risultati di un test che ho fatto qualche tempo fa, usando un file CSS "vita reale" dal mio sito web. L'ottimizzatore CSS viene utilizzato per la minificazione. L'app di archiviazione Linux standard fornita con Ubuntu è stata utilizzata per Gzipping.

Originale: 28.781 byte
Minimizzato: 22.242 byte
Compresso con zip: 6.969 byte
Min + Gzip: 5.990 byte

La mia opinione personale è quella di scegliere prima Gzipping, dal momento che ovviamente fa la differenza. Per quanto riguarda la minificazione, dipende da come lavori. Dovresti conservare il file CSS originale per effettuare ulteriori modifiche lungo la linea. Se non ti dà fastidio minimizzarlo dopo ogni modifica, prova.

(Nota: esistono altre soluzioni, come eseguirlo attraverso un minificatore "su richiesta" durante la pubblicazione del file e memorizzarlo nella cache nel filesystem.)

Fai attenzione quando provi questo: quei due frammenti di CSS sono banalmente piccoli, quindi non beneficiano della compressione GZIP - l'aggiunta della piccola intestazione e piè di pagina di GZIP (circa 20 byte in testa) da sola perderà i guadagni ottenuti. In realtà non avresti un file CSS così piccolo ed essere preoccupato di comprimerlo.

minify + gzip comprime più di un semplice gzip

La risposta alla domanda originale è, sì, minify + gzip otterrà una quantità significativamente maggiore di compressione rispetto a gzip. Questo vale per qualsiasi esempio non banale (ovvero qualsiasi codice JS o CSS utile che superi le centinaia di byte).

Per esempi di questo in effetti, prendi il codice sorgente di Jquery che è disponibile minimizzato e non compresso, comprimili entrambi con gzip e dai un'occhiata.

Vale la pena notare che Javascript beneficia molto di più dalla minificazione rispetto ai CSS ben ottimizzati, ma c'è ancora un vantaggio.

Ragionamento:

La compressione GZIP è senza perdita di dati. Ciò significa che deve memorizzare tutto il testo, inclusi spazi bianchi esatti, commenti, nomi di variabili lunghe e così via, in modo che possano essere perfettamente riprodotti in seguito. D'altra parte, la minificazione è in perdita. Se minimizzi il tuo codice, stai rimuovendo gran parte di queste informazioni dal tuo codice, lasciando meno che GZIP debba preservare.

• La minimizzazione scarta inutilmente gli spazi bianchi, lasciando spazi solo dove necessario per motivi sintattici.
• La minimizzazione rimuove i commenti.
• La minimizzazione del codice può sostituire i nomi degli identificativi con nomi più brevi in ​​cui non vi sarebbero effetti collaterali.
• La minimizzazione del codice può rendere banali "ottimizzazioni del compilatore" per il codice che sono possibili solo analizzando effettivamente il codice
• La minimizzazione CSS può eliminare regole ridondanti o combinare regole che hanno lo stesso selettore.

Hai ragione.

Non è lo stesso minimizzare che gzip (sarebbero chiamati uguali se fosse così). Ad esempio, non è lo stesso per decomprimerlo:

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

Di minimizzare per finire con qualcosa del tipo:

var a = null;

Certo, direi che l'approccio migliore nella maggior parte dei casi è quello di minimizzare PRIMA quindi Gzip, piuttosto che minimizzare o gzip, anche se a seconda del codice a volte solo minimizzare o gzip ti darà risultati migliori rispetto a entrambi.

C'è una soglia alla quale la codifica gzip è vantaggiosa. La regola generale è: più grande è il file, migliore sarà la compressione e gzip che vinceranno a mani basse. Ovviamente puoi minimizzare prima poi gzip dopo.

Ma se stiamo parlando di gzip vs. minify su un piccolo pezzo di testo lungo non più di 100 byte, un confronto "oggettivo" è inaffidabile, persino inutile - a meno che non veniamo fuori con un testo di base per stabilire un metodo standard di benchmarking, come un tipo Lorem Ipsum ma scritto in Javascript o CSS.

Vorrei quindi proporre di confrontare le ultime versioni di jQuery e MooTools (le versioni non compresse) usando il mio codice Fat-Free Minify (PHP) (semplicemente eliminando spazi bianchi e commenti, nessun accorciamento di variabili, nessuna codifica baseX)

Ecco i risultati di minify vs. gzip (con compressione conservativa di livello 5) vs. minify + gzip:

MooTools-Core
-------------
Baseline 102,991 bytes
Minified 79,414 (77.1% of original)
Gzipped 27,406 (26.6%)
Minified+Gzipped 22,446 (21.8%)

jQuery
------
Baseline 170,095
Minified 99,735 (58.6% of original)
Gzipped 46,501 (27.3%)
Minified+Gzipped 27,938 (16.4%)

Prima che qualcuno salti la pistola, questa non è una battaglia delle librerie JS.

Come puoi vedere, minimizzare + gzipping ti dà una migliore compressione su file di grandi dimensioni . La minimizzazione del codice ha i suoi vantaggi, ma il fattore principale è la quantità di spazi bianchi e commenti presenti nel codice originale. In questo caso, jQuery ne ha di più, quindi offre una migliore minimizzazione (molti più spazi bianchi nella documentazione in linea). La forza della compressione di Gzip sta nella quanta ripetizione del contenuto. Quindi non si tratta di minify vs. gzip. Fanno le cose diversamente. E ottieni il meglio da entrambi i mondi usando entrambi.

Perché non usare entrambi?

È facile da testare: basta inserire il testo dei tuoi CSS in file di testo e comprimere i file usando un archiviatore come gzip su Linux.

Ho appena fatto questo, e succede che per il primo css, la dimensione è di 184 byte e per il secondo 162 byte.

Quindi, hai ragione, lo spazio bianco è importante anche per i file compressi con gzip, ma come si può vedere da questo piccolo test, per file veramente piccoli, la dimensione del file compresso potrebbe essere maggiore della dimensione del file originale.

Ciò è dovuto solo alle dimensioni molto ridotte del tuo esempio, per file più grandi, gzipping ti farà ottenere file più piccoli.

Non ho visto nessuno menzionare Mangling, quindi sto pubblicando i miei risultati su questo.

Ecco alcune cifre che ho ideato usando UflifyJS per la minificazione e Gzip. Avevo circa 20 file che ho concatenato insieme a circa 2,5 MB con commenti e tutto il resto.

File Concat 2,5 MB

uglify({
    mangle: false
})

Minimizzato senza demolizione: 929kb

uglify({
    mangle: true
})

Minificato e rovinato: 617kb

Ora se prendo quei file e li gzip otterrò rispettivamente 239kb e 190kb.

Esiste un metodo molto semplice per testare questo: creare un file composto solo da spazi bianchi e un altro file che è veramente vuoto. Quindi Gzip entrambi e confronta le loro dimensioni. Il file con lo spazio bianco sarà ovviamente più grande.

Ovviamente una compressione "umana" con perdita di dati che preserva il layout o altre cose importanti e rimuove tutte le spazzature non necessarie (spazi bianchi, commenti, elementi ridondanti ecc.) Sarà migliore di una compressione gZip senza perdita di dati.

Ad esempio, cose come segni o nomi di funzioni avranno probabilmente una certa lunghezza per descriverne il significato. Sostituire questo con nomi lunghi un carattere farà risparmiare molto spazio e non è possibile con la compressione senza perdita.

A proposito, per CSS ci sono strumenti come il compressore CSS che farà il lavoro in perdita per te.

Tuttavia, otterrai i migliori risultati combinando "ottimizzazione con perdita" e compressione senza perdita.

ovviamente puoi provare - scrivi il tuo in un file e decomprimilo con zlib . Puoi anche provare con il programma di utilità "gzip".

tornando alla tua domanda: non esiste una relazione definita tra la lunghezza della sorgente e il risultato compresso. il punto chiave è l'entropia (quanto diversi sono gli elementi nella fonte).

quindi, dipende da come è la tua fonte. ad esempio, molti spazi continui (es.> 1000) possono essere compressi delle stesse dimensioni di pochi (es. <10) spazi.

questo è il risultato quando gziping i due file

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

Hai ragione, minimizza + i risultati gzip in meno byte. Nessuna prova scientifica però.

Come mai non hai un metodo di prova?

Minimizza il tuo codice in un file e lascialo "non modificato" su un altro. Carica su un server web in grado di decomprimere l'output (ad esempio mod_deflate per Apache), installa l'estensione Firebug per firefox, svuota la cache e accedi a entrambi i file. La scheda "NET" di Firebug conterrà la quantità esatta di dati trasferiti, confrontandoli e avrai una prova "empirica".