© saicle/Shutterstock.com
Mit JavaScript-Minifiern Netzwerkressourcen schonen

Mit JavaScript-Minifiern Netzwerkressourcen schonen


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 Webent­wicklung spürbar senken. Stattdessen erfahren Sie in diesem Artikel, wie Sie schonender mit der Ressource Netzwerk umgehen können.

Bei der Datenübertragung kommt die Datenkompression zum Einsatz. Wikipedia definiert dies folgendermaßen: „Die Datenkompression oder Datenkomprimierung ist ein Vorgang, bei dem die Menge digitaler Daten reduziert wird. Dadurch sinkt der benötigte Speicherplatz und die Übertragungszeit der Daten verkürzt sich [...] Grundsätzlich wird bei der Datenkompression versucht, überflüssige Informationen zu entfernen.“ – Genauso sollten Sie auch mit Ihrem JavaScript-Quellcode verfahren.

Sie können den Ladevorgang einer Webapplikation in verschiedene Phasen unterteilen. Zunächst wird die angefragte Seite vom Server heruntergeladen und dann vom Browser interpretiert. In den seltensten Fällen reicht für diesen Vorgang eine Anfrage an den Server aus. Stattdessen werden verschiedene Ressourcen, wie beispielsweise Style Sheets, Mediendateien wie Bilder oder aber JavaScript, nachgeladen und in die Seite eingebunden. Bei jeder dieser Anfragen nach einer zusätzlichen Datei entsteht zusätzlicher Overhead. An dieser Stelle kommen die JavaScript-Minifier zum Einsatz.

Wie so häufig im Bereich der Webentwicklung existieren hier zahlreiche Open-Source-Lösungen, die Sie für Ihre Webapplikation einsetzen können. Hier stellt sich jedoch die Frage, welches Werkzeug Sie verwenden sollten.

Was sind und wozu dienen Minifier?

Minifier kommen im Allgemeinen zum Einsatz, wenn es darum geht, die Größe der auszuliefernden Dateien zu verringern. Im konkreten Fall von JavaScript-Quellcode bedeutet das in erster Linie das Entfernen von unnötigen Zeichen. Nehmen Sie beispielsweise die unkomprimierte Version von jQuery – diese beinhaltet allein beinahe 9 000 Zeilenumbrüche. Sie haben in der Regel keine direkten Auswirkungen auf die Ausführung des Quellcodes und können aus diesem Grund entfernt werden. Das ist jedoch nur eine von zahlreichen Möglichkeiten, die für die Komprimierung von JavaScript-Quellcode zur Verfügung stehen. Die wichtigste Eigenschaft hierbei ist, dass die Funktionsfähigkeit Ihres Quellcodes vollständig erhalten bleiben muss.

Ein weiteres Einsatzgebiet von Minifiern ist die Zusammenfassung von JavaScript-Dateien. Dies dient vor allem der Reduzierung der Anzahl der Anfragen an den Server. In den meisten Fällen besteht die Zusammenführung von Dateien aus einer einfachen Verkettung der Dateien. Das bedeutet, dass Sie diesen Effekt auch ganz einfach ohne Werkzeugunterstützung erreichen können. Der Vorteil liegt darin, dass Sie dem Minifier eine Liste von Dateien angeben und sich das Werkzeug um alles Übrige kümmert.

Obfuscation, also die Verschleierung Ihres Quellcodes, ist der dritte Grund, warum Sie einen Minifier einsetzen sollten. Ihr JavaScript-Quellcode wird vollständig zum Benutzer übertragen. Das bedeutet, dass jeder, der Zugriff auf Ihren Server hat, diesen Code lesen kann. Verwenden Sie an dieser Stelle einen Minifier, wird es schwieriger, den Quellcode zu lesen und zu verstehen. Es existieren jedoch auch Programme, die Ihnen aus komprimiertem JavaScript-Quellcode wieder lesbaren Quellcode erzeugen.

Ein weiteres Merkmal von JavaScript-Minifiern erschwert es trotz aller Werkzeuge, solchen Quellcode zu lesen. Um den Speicherbedarf weiter zu verringern, bieten zahlreiche Minifier die Option, den Quellcode selbst zu verändern. Ein klassisches Beispiel hierfür ist das Verkürzen von Variablennamen. So wird aus einer Variable mit dem Namen firstname beispielsweise die Variable a. Neben diesen drei Merkmalen können Sie die Auswahl des passenden Werkzeugs noch von einer Vielzahl weiterer Aspekte, wie beispielsweise der Verfügbarkeit auf bestimmten Systemen oder der Integrierbarkeit des Werkzeugs in Ihre Arbeitsumgebung, abhängig machen. In den folgenden Abschnitten lernen Sie einige JavaScript-Minifier und deren Besonderheiten kennen.

UglifyJS

Den Anfang der betrachteten Werkzeuge macht UglifyJS. Dieses Werkzeug liegt mittlerweile in der Version 2.4 vor und wurde beim Versionssprung von 1 auf 2 nahezu komplett neu geschrieben. UglifyJS ist vollständig in JavaScript geschrieben und auf nahezu allen Systemen verfügbar. Es ist eine Open-Source-Bibliothek, die unter der BSD-Lizenz verfügbar ist. Den Quellcode können Sie unter https://github.com/mishoo/UglifyJS2 einsehen. Für den Betrieb ist die einzige Voraussetzung, dass Sie Node.js auf Ihrem System installiert haben. Ist diese Bedingung erfüllt, können Sie UglifyJS über den Paketmanager von Node.js auf Ihrem System installieren und es auf der Kommandozeile benutzen. Folgender Code dient zur Installation von UglifyJS:

npm install -g uglifyjs

In der einfachsten Version eines Aufrufs geben Sie lediglich den Namen einer zu komprimierenden Datei als Option auf der Kommandozeile an. Als Ergebnis liefert UglifyJS auf der Kommandozeile die minifizierte Version des Quellcodes, wobei sich diese Operation vor allem darin auswirkt, dass sämtliche Kommentare, überflüssige Leerzeichen und Zeilenumbrüche aus dem Quellcode entfernt werden. Mit der Kommandozeilenoption -o können Sie eine Datei angeben, in die Sie das Resultat schreiben möchten.

Sie können die Funktionsweise von UglifyJS testen, indem Sie beispielsweise den Quellcode der jQuery-Bibliothek komprimieren lassen. jQuery in der Version 2.0.3 weist unkomprimiert eine Größe von ca. 240 KB auf. Wenden Sie UglifyJS darauf an, erhalten Sie eine komprimierte Datei mit einer Größe von 128 KB. Das bedeutet, dass die zu übermittelnde Dateigröße auf etwa die Hälfte gesunken ist.

Geben Sie nun statt der einen Eingabedatei mehrere Dateien an, werden diese in der Ausgabe zusammengefügt. Sie sollten hier allerdings darauf achten, dass UglifyJS die Dateien einfach in der angegebenen Reihenfolge aneinanderhängt. Das bedeutet, dass eventuelle Abhängigkeiten nicht automatisch aufgelöst werden. Haben Sie also mehrere Dateien mit JavaScript-Quellcode und baut eine Datei auf einer anderen auf, sollten Sie auf jeden Fall dafür sorgen, dass Sie die benötigte Datei zuerst nennen. Angenommen, Ihre Applikation basiert auf jQuery und Sie haben Ihre eigene JavaScript-Logik in eine oder mehrere separate Dateien ausgelagert, wovon eine die Zeile $(document).ready(...) oder Ähnliches beinhaltet, müssen Sie auf der Kommandozeile zuerst die Datei mit dem Quellcode von jQuery angeben und danach Ihren eigenen Quellcode, da Sie ansonsten die Fehlermeldung ReferenceError: $ is not defined erhalten. Folgender Quellcode zeigt die Verwendung von UglifyJS:

uglifyjs app.js jquery-2.0.3.js -o app.min.js

Als Konvention zur Benennung von komprimierten Quellcodedateien ...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang