Mit JavaScript Minifiern Netzwerkressourcen schonen

Closure Compiler
Kommentare

Eines der größten Probleme bei der Webentwicklung ist der Umgang mit Ressourcen. Und nein, Sie erfahren heute nichts über Green IT und wie Sie die Stromkosten Ihrer Server durch Webentwicklung spürbar senken. Stattdessen erfahren Sie in diesem Artikel, wie Sie schonender mit der Ressource Netzwerk umgehen können – im sechsten Teil der Serie sehen wir uns dazu den mächtigen Closure Compiler von google an, bevor wir uns im letzten Teil morgen mit der Automatisierung beschäftigen.

Der letzte JavaScript Minifier, den Sie hier kennen lernen, stammt von Google, ist Bestandteil der Closure Tools und heißt Closure Compiler. Dieses Werkzeug wird häufig mit gcc abgekürzt, wobei diese Abkürzung eigentlich für die GNU Compiler Collection, einer Compilersammlung für Unix-Systeme, reserviert ist.

Der Closure Compiler ist als Open-Source-Software unter der Apache-2-Lizenz verfügbar. Das Werkzeug können Sie unter closure-compiler.googlecode.com direkt in der aktuellsten Version herunterladen. Der Kern des Google Closure Compilers besteht aus einem .jar-Archiv. Die Applikation ist also nicht in JavaScript, sondern in Java geschrieben. Daraus ergibt sich, dass Sie eine Java-Laufzeitumgebung benötigen, um den Closure Compiler zu betreiben.

Wie erwähnt, nutzen Sie für die Ausführung des Closure Compilers Java. Neben der Option -jar und dem Namen des .jar-Archivs geben Sie die Optionen –js sowie den Dateinamen der Eingabedatei und –js_output_file und die Ausgabedatei an:

java -jar compiler.jar --js jquery-2.0.3.js --js_output_file jquery-2.0.3.min.js

Bei der Komprimierung von jQuery mit dem Closure Compiler fällt als Erstes auf, dass das Werkzeug einige Warnungen ausgibt. Das liegt daran, dass der Closure Compiler bei der Komprimierung den eingegebenen Quellcode zunächst analysiert. Bei der Analyse werden Sie auf Stellen im Quellcode aufmerksam gemacht, die darauf hindeuten, dass bekannte Antipatterns eingesetzt werden, die bei der Ausführung der Applikation beziehungsweise der Erweiterung des Quellcodes zu Fehlern führen können. Solange es sich bei den Meldungen lediglich um Warnungen handelt, können Sie das resultierende Ergebnis dennoch in Ihrer Webapplikation einsetzen.

Die Größe der Ausgabedatei beträgt 84 KB bei einer Größe der Eingabedatei von 240 KB. Die Komprimierung liegt also im Bereich von UglifyJS und dem Microsoft Ajax Minifier. Das Ergebnis wird erreicht, indem der Closure Compiler Kommentare und Whitespaces entfernt und Variablennamen verkürzt.

Der Closure Compiler unterstützt auch die Zusammenfassung und Komprimierung mehrerer Eingabedateien. Um das zu erreichen, geben Sie mit der Option –js statt nur einer Datei mehrere JavaScript-Dateien durch Leerzeichen getrennt an.

Die Besonderheit des Closure Compilers ist, dass er über mehrere Stufen der Komprimierung verfügt. Über die Option –compilation_level können Sie steuern, wie das Werkzeug die Eingabe komprimieren soll. Es stehen drei Levels der Komprimierung zur Verfügung. Die erste und einfachste Version ist WHITESPACE_ONLY. In diesem Modus entfernt der Closure Compiler lediglich Kommentare und Whitespaces. Die Namen der Variablen bleiben in diesem Fall vollständig erhalten. Die Ausgabe von jQuery in diesem Modus weist eine Größe von 128 KB auf.

Die nächste Stufe der Komprimierung erreichen Sie durch die Option SIMPLE_OPTIMIZATIONS. In diesem Fall werden ebenfalls Kommentare und Whitespaces entfernt, es werden aber auch die verwendeten Variablen verkürzt. Diese Option ist der Standardfall, wenn Sie den Closure Compiler ohne die Option –compilation_level verwenden. Die Funktionsfähigkeit Ihres JavaScript-Quellcodes sollte in diesem Fall nicht negativ beeinflusst werden.

Der dritte Wert, den Sie mit der Option –compilation_level verwenden können, ist ADVANCED_OPTIMIZATION. Mit dieser Option wird aus den 240 KB jQuery-Quellcode eine Ausgabedatei mit einer Größe von 76 KB erzeugt.

Dieses Ergebnis ist das beste, das Sie mit den hier vorgestellten JavaScript Minifiern erreichen können. Es wird möglich, indem der Closure Compiler den JavaScript-Quellcode umschreibt. Dabei werden nicht nur die Namen der Variablen auf wenige Zeichen reduziert, sondern ganze Codeblöcke umgeschrieben, es wird also aktiv in die Logik Ihrer Applikation eingegriffen. Aus diesem Grund sollten Sie auf jeden Fall sicherstellen, dass Sie über einen Mechanismus verfügen, den resultierenden Quellcode zu prüfen. Ein solches Mittel sind beispielsweise Unit Tests.

Die Optimierung mit SIMPLE_OPTIMIZATIONS bewegt sich lediglich im Funktions-Scope. Das bedeutet, dass lediglich Variablen innerhalb einer Funktion umbenannt werden. Die ADVANCED_OPTIMIZATION geht hier noch einen Schritt weiter und passt auch den globalen Scope an und schreibt globale Variablen und Funktionen um. Das bedeutet wiederum für Ihren Quellcode, dass Sie sicherstellen müssen, dass der komprimierte Quellcode mit eventuell nicht komprimierter Logik noch funktioniert. Die dritte Ebene der Optimierung des Closure Compilers entfernt auch nicht erreichbaren Quellcode aus der Eingabedatei. Beinhaltet Ihr Quellcode beispielsweise eine Funktion, die über ein return-Statement verfügt und folgt auf dieses weiterer Quellcode, der bei der Ausführung auf keinen Fall erreicht wird, gibt der Closure Compiler bei seinem Durchlauf eine Warnung aus, dass unerreichbarer Code gefunden wurde. Im Resultat der Komprimierung findet sich der unerreichbare Quellcode nicht wieder.

Ein weiterer Mechanismus der Optimierung ist das Inlining von Funktionen. Dabei wird die Funktion an die Stelle einer auf sie verweisenden Variablen kopiert und so direkt aufgerufen, ohne zuvor einer Variablen zugewiesen worden zu sein.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -