Gzip versus Minify

Ich hatte neulich eine etwas lebhafte Diskussion über das Minimieren von Javascript und CSS im Vergleich zu jemandem, der Gzip bevorzugt.

Ich werde diese Person X nennen.

X sagte, dass Gzip den Code bereits minimiert, da es Ihre Dateien komprimiert.

Ich bin nicht einverstanden. Zip ist eine verlustfreie Methode zum Verkleinern der Dateigröße. Verlustfrei bedeutet, dass das Original perfekt wiederhergestellt werden muss. Dies bedeutet, dass Informationen gespeichert werden müssen, um die Leerzeichen, die nicht benötigten Zeichen, den kommentierten Code und alles andere wiederherstellen zu können. Das nimmt mehr Platz ein, da mehr komprimiert werden muss.

Ich habe keine Testmethode, aber ich glaube, dass das Gzip dieses Codes:

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

Wird immer noch größer als das Gzip dieses Codes sein:

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

Gibt es jemanden, der dies richtig oder falsch beweisen kann?
Und bitte kommen Sie nicht und sagen Sie "Es ist richtig, weil ich das immer benutzt habe".

Ich bitte hier um wissenschaftliche Beweise.

Sehr einfach zu testen. Ich habe dein js genommen, sie in verschiedene Dateien gelegt und gzip -9 darauf ausgeführt. Hier ist das Ergebnis. Dies wurde auf einem WinXP-Computer durchgeführt, auf dem Cygwin und gzip 1.3.12 ausgeführt werden.

-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

Hier ist ein weiterer Test anhand eines realen JS-Beispiels. Die Quelldatei ist "common.js". Die ursprüngliche Dateigröße beträgt 73134 Byte. Minimiert wurden 26232 Bytes.

Originaldatei:

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

Minimierte Datei:

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

Originaldatei mit der Option -9 (gleiche Version wie oben):

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

Minimierte Datei mit der Option -9 (gleiche Version wie oben):

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

Wie Sie sehen können, gibt es einen deutlichen Unterschied zwischen den verschiedenen Methoden. Die beste Wette ist, sie sowohl zu minimieren als auch zu gzipen.

Hier sind die Ergebnisse eines Tests, den ich vor einiger Zeit mit einer "echten" CSS-Datei von meiner Website durchgeführt habe. CSS Optimiser wird zur Minimierung verwendet. Die mit Ubuntu gelieferte Standard-Linux-Archiv-App wurde für Gzipping verwendet.

Original: 28.781 Bytes
Minimiert: 22.242 Bytes
Gzipped: 6.969 Bytes
Min + Gzip: 5.990 Bytes

Meine persönliche Meinung ist, zuerst Gzipping zu wählen, da dies offensichtlich den größten Unterschied macht. Die Minimierung hängt davon ab, wie Sie arbeiten. Sie müssten die ursprüngliche CSS-Datei behalten, um später Änderungen vornehmen zu können. Wenn es Sie nicht stört, es nach jeder Änderung zu minimieren, dann versuchen Sie es.

(Hinweis: Es gibt andere Lösungen, z. B. das Ausführen eines Minifiers "on-demand" beim Bereitstellen der Datei und das Zwischenspeichern im Dateisystem.)

Achten Sie beim Testen darauf: Diese beiden CSS-Schnipsel sind trivial klein, sodass sie nicht von der GZIP-Komprimierung profitieren. Allein durch Hinzufügen der kleinen Kopf- und Fußzeile von GZIP (ca. 20 Byte Overhead) gehen die erzielten Gewinne verloren. In Wirklichkeit hätten Sie keine so kleine CSS-Datei und wären besorgt, sie zu komprimieren.

minify + gzip komprimiert mehr als nur gzip

Die Antwort auf die ursprüngliche Frage lautet: Ja, minify + gzip wird erheblich stärker komprimiert als nur gzip. Dies gilt für jedes nicht triviale Beispiel (dh für jeden nützlichen JS- oder CSS-Code, der mehr als einige hundert Bytes umfasst).

Beispiele hierfür finden Sie im Jquery-Quellcode der minimiert und unkomprimiert verfügbar ist. Komprimieren Sie beide mit gzip und werfen Sie einen Blick darauf.

Es ist erwähnenswert, dass Javascript viel mehr von der Minimierung profitiert als gut optimiertes CSS, aber es gibt immer noch einen Vorteil.

Argumentation:

Die GZIP-Komprimierung ist verlustfrei. Dies bedeutet, dass der gesamte Text gespeichert werden muss, einschließlich der genauen Leerzeichen, Kommentare, langen Variablennamen usw., damit sie später perfekt reproduziert werden können. Andererseits ist die Minimierung verlustbehaftet. Wenn Sie Ihren Code minimieren, entfernen Sie einen Großteil dieser Informationen aus Ihrem Code, sodass weniger übrig bleibt, als GZIP aufbewahren muss.

• Durch die Minimierung werden unnötige Leerzeichen verworfen, sodass aus syntaktischen Gründen nur Leerzeichen verbleiben.
• Durch die Minimierung werden Kommentare entfernt.
• Durch die Code-Minimierung können Bezeichnernamen durch kürzere Namen ersetzt werden, bei denen keine Nebenwirkungen auftreten.
• Durch die Code-Minimierung können triviale "Compiler-Optimierungen" des Codes vorgenommen werden, die nur durch tatsächliches Parsen des Codes möglich sind
• Durch die CSS-Minimierung können redundante Regeln beseitigt oder Regeln kombiniert werden, die denselben Selektor haben.

Du hast recht.

Es ist nicht dasselbe zu verkleinern als zu gippen (sie würden gleich genannt, wenn dies der Fall wäre). Zum Beispiel ist es nicht dasselbe, dies zu gzip:

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

Dann minimieren Sie, um am Ende so etwas wie:

var a = null;

Natürlich würde ich sagen, dass es in den meisten Fällen der beste Ansatz ist, ZUERST als Gzip zu minimieren, als nur zu minimieren oder zu komprimieren, obwohl je nach Code manchmal nur das Minimieren oder Komprimieren bessere Ergebnisse liefert als beides.

Es gibt einen Schwellenwert, bei dem die GZIP-Codierung vorteilhaft ist. Die allgemeine Regel lautet: Je größer die Datei, desto besser werden die Komprimierung und gzip zweifellos gewinnen. Natürlich können Sie zuerst minimieren und danach gzip.

Wenn es sich jedoch um gzip vs. minify für einen kleinen Text handelt, der nicht länger als 100 Byte ist, ist ein "objektiver" Vergleich unzuverlässig, sogar sinnlos - es sei denn, wir erstellen einen Basistext zur Festlegung eines Standard-Benchmarking-Mittels. wie ein Lorem Ipsum-Typ, aber in Javascript oder CSS geschrieben.

Lassen Sie mich daher vorschlagen, die neuesten Versionen von jQuery und MooTools (die unkomprimierten Versionen) mit meinem PHP-Code ( Fat-Free Minify ) zu vergleichen (nur Leerzeichen und Kommentare entfernen, keine Verkürzung von Variablen, keine baseX-Codierung).

Hier sind die Ergebnisse von minify vs. gzip (bei konservativer Komprimierung der Stufe 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%)

Bevor jemand die Waffe springt, ist dies kein Kampf der JS-Bibliotheken.

Wie Sie sehen können, können Sie durch Minimieren + Zippen eine bessere Komprimierung für große Dateien erzielen . Das Minimieren von Code hat seine Vorteile, aber der Hauptfaktor ist, wie viel Leerzeichen und Kommentare im Originalcode vorhanden sind. In diesem Fall verfügt jQuery über mehr, sodass eine bessere Minimierung möglich ist (viel mehr Leerzeichen in der Inline-Dokumentation). Die Stärke der Gzip-Komprimierung liegt darin, wie viel Wiederholung im Inhalt enthalten ist. Es geht also nicht um Minify vs. Gzip. Sie machen die Dinge anders. Und Sie erhalten das Beste aus beiden Welten, wenn Sie beide verwenden.

Warum nicht beide verwenden?

Es ist einfach zu testen: Fügen Sie einfach den Text Ihres CSS in Textdateien ein und komprimieren Sie die Dateien mit einem Archivierungsprogramm wie gzip unter Linux.

Ich habe dies gerade getan, und es kommt vor, dass für das erste CSS die Größe 184 Bytes und für das zweite 162 Bytes beträgt.

Sie haben also Recht, Leerraum ist selbst für komprimierte Dateien wichtig, aber wie aus diesem kleinen Test hervorgeht, kann die Größe der komprimierten Datei für wirklich kleine Dateien größer sein als die Größe der Originaldatei.

Dies liegt nur an der sehr geringen Größe Ihres Beispiels. Bei größeren Dateien erhalten Sie durch Gzippen kleinere Dateien.

Ich habe niemanden gesehen, der Mangling erwähnt hat, also veröffentliche ich meine Ergebnisse dazu.

Hier sind einige Zahlen, die ich mit UflifyJS zur Minimierung und Gzip erstellt habe. Ich hatte ungefähr 20 Dateien, die ich mit ungefähr 2,5 MB mit Kommentaren und allem zusammen verkettet habe.

Concat-Dateien 2,5 MB

uglify({
    mangle: false
})

Minimiert ohne Zerfleischen: 929kb

uglify({
    mangle: true
})

Minimiert und verstümmelt: 617kb

Wenn ich diese Dateien nehme und gzipe, erhalte ich 239 KB bzw. 190 KB.

Es gibt eine sehr einfache Methode, dies zu testen: Erstellen Sie eine Datei, die nur aus Leerzeichen und einer anderen Datei besteht, die wirklich leer ist. Dann Gzip beide und vergleiche ihre Größen. Die Datei mit dem Leerzeichen wird natürlich größer.

Natürlich ist eine "menschliche" verlustbehaftete Komprimierung, die das Layout oder einige andere wichtige Dinge beibehält und nicht benötigten Müll (Leerzeichen, Kommentare, redundante Dinge usw.) entfernt, besser als eine verlustfreie gZip-Komprimierung.

Zum Beispiel werden Dinge wie Markierungen oder Funktionsnamen höchstwahrscheinlich eine bestimmte Länge haben, um die Bedeutung zu beschreiben. Das Ersetzen durch Namen mit einer Länge von einem Zeichen spart viel Platz und ist mit verlustfreier Komprimierung nicht möglich.

Übrigens gibt es für CSS Tools wie den CSS-Kompressor , die die verlustbehaftete Arbeit für Sie erledigen.

Die besten Ergebnisse erzielen Sie jedoch, wenn Sie "verlustbehaftete Optimierung" und verlustfreie Komprimierung kombinieren.

Natürlich können Sie testen - schreiben Sie Ihre in eine Datei und gzip sie mit zlib . Sie können es auch mit dem Dienstprogramm "gzip" versuchen.

zurück zu Ihrer Frage - es gibt keine eindeutige Beziehung zwischen der Länge der Quelle und dem komprimierten Ergebnis. Der entscheidende Punkt ist die 'Entropie' (wie unterschiedlich sind die einzelnen Elemente in der Quelle).

Das hängt also davon ab, wie Ihre Quelle ist. Beispielsweise können viele fortlaufende Räume (z. B.> 1000) auf die gleiche Größe komprimiert werden wie wenige (z. B. <10) Räume.

Dies ist das Ergebnis beim Gzipen der beiden Dateien

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

Sie sind richtig, minimieren + gzip führt zu weniger Bytes. Kein wissenschaftlicher Beweis.

Wie kommt es, dass Sie keine Testmethode haben?

Minimieren Sie Ihren Code in einer Datei und lassen Sie ihn in einer anderen Datei "nicht minimiert". Laden Sie auf einen Webserver hoch, der die Ausgabe gzipen kann (z. B. mod_deflate für Apache), installieren Sie die Firebug-Erweiterung für Firefox, leeren Sie den Cache und greifen Sie auf beide Dateien zu. Die Registerkarte "NET" von Firebug enthält die genaue Menge der übertragenen Daten. Vergleichen Sie diese und Sie haben "empirische" Beweise.