JavaScript komprimieren

Durch JavaScript-Komprimierung läßt sich eine Performance-Verbesserung für die Webanwendung erreichen. Das Ergebnis einer JavaScript-Komprimierung ist abhängig vom genutzten Tool. Im Normalfall werden dabei Whitespaces, Zeilenumbrüche und Kommentare aus dem Code entfernt und Variablennamen gekürzt, um den Code kompakter zu machen. Einige Tools können auch toten Code erkennen und entfernen oder sogar Teile des Codes durch optimierte Syntax ersetzen.

Komprimierte JavaScript-Dateien haben oft nur noch einen Bruchteil ihrer ursprünglichen Größe. Gerade in Hinblick auf die Website-Nutzung auf mobilen Geräten mit eingeschränkter Bandbreite sollte daher auf eine Komprimierung größerer Dateien nicht verzichtet werden.

Komprimierung für kleinere Projekte

Bei kleineren Projekten kann die Komprimierung von einzelnen JavaScript-Dateien über Eingebetools wie das UI des Closure Compilers völlig ausreichen (http://closure-compiler.appspot.com/home).

Der Closure Compiler macht beispielsweise aus folgendem Code-Schnipsel…

var meinArray = new Array('Apfel', 'Banane', 'Birne');

// Jeden einzelnen Buchstaben ausgeben
for (var i = 0; i < meinArray.length; i++) {
    for (var j = 0; j < meinArray[i].length; j++) {
        console.log(meinArray[i][j]);
    }
}

… diesen Einzeiler. Die Dateigröße verringert sich um rund 55%!

for(var a=["Apfel","Banane","Birne"],b=0;b<a.length;b++)for(var c=0;c<a[b].length;c++)console.log(a[b][c]);

Da komprimierter Code schlecht zu debuggen ist, sollte die Komprimierung erst zum Schluss des Entwicklungsprozesses erfolgen. Bei größeren Projekten ist die Komprimierung daher typischerweise Teil eines automatisierten Build-Prozesses.

Komprimierung bei umfangreichen Projekten

In der JavaScript-Welt gibt es mit Grunt (http://gruntjs.com/) ein sehr vielseitiges Build-Tool. Über Grunt lassen sich externe Module einbinden, die den Entwicklungscode beim Build optimieren können, so auch Module zum Komprimieren von JavaScript. Leider erfordern Installation und Umgang mit Grunt etwas Einarbeitung und Übung. Aber wenn es einmal richtig in das Projekt integriert wurde, lässt sich die JavaScript-Komprimierung durch einfache Anpassungen einer Konfigurationsdatei einschalten.

uglify: {
    build: {
        src: ['js/libs/jquery/jquery.js', 'js/app/app.js' ],
        dest: 'build/js/app/app.js'
    }
}

Oben ein Ausschnitt aus der Gruntfile.js, einer Konfigurationsdatei für Grunt. Hier wird das Modul „Uglify“ genutzt um mehrere einzelne JavaScript-Dateien zu komprimieren und zu einer Datei zusammenzufügen. Viele weitere Module zum Beispiel für die Komprimierung von HTML, CSS und Grafiken sind verfügbar.

Eine bewährte Alternative zu den vielen Build-Tools ist Minify (https://github.com/mrclay/minify), eine Bibliothek, die sich einfach in bestehende PHP-Projekte integrieren lässt. Auch hiermit können unter anderem JavaScript-Dateien komprimiert werden. Leider wird dieses Projekt im Moment nur sporadisch weiterentwickelt.