Gzip contro minify

Question

Ho avuto un po ' vivace discussione, l'altro giorno su minifying di Javascript e CSS contro qualcuno che preferisce con Gzip.

Io chiamo questa persona X.

X ha detto che Gzip giá minifies il codice, giacché zip file.

Io non sono d'accordo.Zip è un senza perdita di dati metodo di compattazione filesize.Lossless significa che l'originale deve essere restaurato perfettamente, il che significa info devono essere memorizzati per essere in grado di ripristinare gli spazi, i non necessari caratteri, codice commentato e tutto il resto.Che occupa più spazio, dato che più deve essere compresso.

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

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

Sarà ancora più grande rispetto a Gzip di questo codice:

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

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

Sto chiedendo prova scientifica qui.

Answer 1

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 è & Quot; common.js & Quot; 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 compresso 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.

Answer 2

Ecco i risultati di un test che ho fatto qualche tempo fa, usando un " vita reale " File CSS dal mio sito Web. 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
Gzip: 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, provalo.

(Nota: esistono altre soluzioni, come eseguirlo attraverso un minificatore " on-demand " quando si serve il file e lo si memorizza nella cache nel filesystem.)

Answer 3

Guardare fuori quando si prova questo:questi due frammenti di CSS sono banalmente piccolo, in modo che non beneficiano di compressione GZIP - l'aggiunta di GZIP piccola intestazione è la sola a perdere i progressi fatti.In realtà non sarebbe un file CSS di questo piccolo e di essere preoccupato per la compressione.

minify+gzip comprime di più che solo gzip

La risposta alla domanda è sì, minify + gzip farà guadagnare una quantità significativa di compressione in più di solo gzip.Questo è vero per tutti i non-banale esempio (cioè ad ogni utile JS o CSS il codice che è più di poche centinaia di byte).

Per esempi di questo, in effetti, afferrare Jquery codice sorgente disponibile minified e non compresso, compressione con gzip e dare un'occhiata.

Vale la pena notare che Javascript vantaggi molto di più dalla minimizzazione di ben ottimizzato CSS, ma c'è ancora un vantaggio.

Ragionamento:

La compressione GZIP è senza perdita di dati.Questo significa che si deve memorizzare ogni testo, comprensivo di spazi, commenti, lungo i nomi di variabili e così via, in modo che possano essere riprodotte in seguito.D'altra parte, minimizzazione è la perdita di dati.Se si minify il codice, la rimozione di gran parte di queste informazioni dal tuo codice, lasciando meno che GZIP deve preservare.

• Minimizzazione dei rigetti inutilmente spazio, lasciando spazi solo se necessario per ragioni sintattiche.
• Minimizzazione rimuove i commenti.
• Codice minimizzazione possono sostituire i nomi degli identificatori con i nomi più brevi, dove non ci saranno effetti collaterali.
• Codice minimizzazione può fare nulla ottimizzazioni del compilatore' il codice che è possibile solo analizzare il codice
• CSS minimizzazione può eliminare ridondante regole o combinare regole che hanno lo stesso selettore.

Answer 4

Hai ragione.

Non è lo stesso da minimizzare che da gzipping (verrebbero 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 fare entrambi.

Answer 5

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 " obiettivo " il confronto è 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.

Quindi, lasciami proporre di confrontare le ultime versioni di jQuery e MooTools (le versioni non compresse) usando my codice Fatify Free-Fat (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.

Answer 6

Perché non usare entrambi?

Answer 7

È facile da testare: basta inserire il testo del tuo 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 molto 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.

Answer 8

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

Ecco alcune figure che mi sono venute in mente 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 maltrattamenti: 929kb

uglify({
    mangle: true
})

Ridotto e ridotto: 617kb

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

Answer 9

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 contenente lo spazio bianco sarà ovviamente più grande.

Answer 10

Naturalmente " umano " la compressione con perdita che preserva il layout o alcune altre cose importanti e rimuove tutte le spazzature non necessarie (spazi bianchi, commenti, cose ridondanti ecc.) sarà meglio di una compressione senza perdita di dati gZip.

Ad esempio, molto probabilmente cose come segni o nomi di funzioni avranno 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 Compressore CSS che farà il lavoro smarrito per te.

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

Answer 11

ovviamente puoi testarlo: scrivi il tuo in un file e decomprimilo con zlib . Puoi anche provare con & Quot; gzip & Quot; programma di utilità.

torna 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 della stessa dimensione di pochi spazi (es. < 10).

Answer 12

questo è il risultato quando si decomprimono i due file

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

Answer 13

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 miniato " 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. quot di Firebug; NET & Quot; tab conterrà la quantità esatta di dati trasferiti, confrontarli e si avrà " empirical " la prova.