Mit JavaScript Minifiern Netzwerkressourcen schonen

UglifyJS
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. In diesem Teil der Serie „Code kompakt“ geht es um den Minifier 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. UgilfyJS 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 UgilfyJS 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 hat sich die Dateiendung .min.js durchgesetzt. Da es sich bei der komprimierten Datei nach wie vor um den voll funktionsfähigen Quellcode Ihrer Applikation handelt, können Sie diesen über ein script-Tag in den HTML-Code Ihrer Applikation einbinden und Ihre Applikation wie gewohnt verwenden.

Eine noch bessere Komprimierung des ursprünglichen Quellcodes erreichen Sie, wenn Sie die Kommandozeilenoption –m verwenden. Diese Option steht für mangle und sorgt dafür, dass alle Variablen verkürzt werden. So findet sich beispielsweise im komprimierten jQuery-Quellcode die Variable mit dem Namen window unter dem Namen e wieder.

Wie bereits erwähnt, stellen Minifier eine Möglichkeit dar, Ihren Code zu schützen, indem er unleserlich gemacht wird. Mit UglifyJS können Sie allerdings diesen Weg auch zurückgehen und komprimierten Quellcode wieder lesbar machen. Die Komprimierung ist allerdings nicht vollständig umkehrbar, da Uglify die Kommentare im Quellcode entfernt und mit den entsprechenden Optionen Variablen umbenennt. Der so genannte Beautifier geht vom komprimierten Quellcode aus, fügt Zeilenumbrüche und Einrückungen ein und macht so den Quellcode wieder besser lesbar. Den Beautifier verwenden Sie, indem Sie auf der Kommandozeile die Option –b angeben.

UglifyJS ist ein sehr schneller und wirkungsvoller Minifier, der alle wichtigen Features implementiert.

Aufmacherbild: Rear view of a Hairless Mixed-breed dog, mix between a French bulldog and a Chinese crested dog, sitting and looking at the camera in front of white background von Shutterstock / Urheberrecht: Eric Isselee

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -