Javascript-Dateien kombinieren


Die Ladezeit einer Webseite hängt sehr stark von der Anzahl der http Requests ab, sowie der Dateigrößen. Da aktuelle und moderne Webseiten kaum noch auf JavaScript und den damit einhergehenden AJAX-Features verzichten könnten, werden bei dem Aufruf einer solchen Webseite oft mehrere JavaScript Dateien geladen. Da jede JS-Datei einen http Requests erzeugt, kann hier angesetzt werden und die Anzahl der http Requests und damit die Ladezeit optimiert werden.

Der Analysepunkt Combine external JavaScript steht sowohl für extern eingebundene JavaScript-Dateien (z.B. mittels API oder über CDNs) als auch für eigene, auf dem Server befindliche Dateien. Um diese miteinander zu kombinieren gibt es verschiedene Varianten.

Variante 1: Manuelles Zusammenfassen aller Javascript Dateien

Wenn es programmtechnisch möglich ist, dann können mehrere (oder auch alle) Javascript-Dateien zu einer einzigen zusammengefasst werden. Kopiert dazu den kompletten Code aus jeder einzelnen Javascript-Datei und fügt diesen dann in eine andere Javascript Datei ein (nennt diese dann z.B. global.js). Speichern, hochladen, testen, fertig. (Unbedingt die Funktionalität der Webseite und deren Javascript-Features testen).

Achtung: Kopiert die einzelnen Javascript-Dateien in der Reihenfolge der Einbindung aus dem Quelltext in die globale Javascript-Datei! Sonst funktioniert nichts mehr!

Um dieses Problem nicht nachträglich lösen zu müssen, sollten Programmierer bereits bei der Erstellung einer neuen Webseite darauf hingewiesen werden.
Sollten die Funktionen auf der Webseite nach der manuellen Zusammenfassung der JavaScript Dateien nicht mehr fehlerfrei funktionieren, dann bitte Variante 2 testen.

Variante 2: JavaScript kombinieren mittels .htaccess und PHP

Auf der Webseite +rakaz.nl – compress JS und CSS gibt es ein kleines Script, bestehend aus einer PHP Datei und einigen .htaccess-Codezeilen, welches es Euch ermöglicht mehrere JavaScript Dateien automatisch zu einer einzigen Datei zusammenzufassen und diese gleichzeitig mittels GZIP zu komprimieren.

Ladet Euch dazu die entsprechende Datei herunter, passt darin eventuell den Pfad zu den JS Dateien an. Fügt Eurer .htaccess Datei die Codezeilen hinzu, ladet diese Dateien auf den Server hoch und passt anschließend im Quellcode die Zeilen zum Aufruf der Javascript Dateien an.

Beispiel: So wird aus

<script type="text/javascript" language="javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="cufon-yui.js"></script>
<script type="text/javascript" language="javascript" src="global.js"></script>


dann

<script type="text/javascript" language="javascript" src="jquery-1.4.2.min.js,cufon-yui.js,global.js"></script>

Fertig.

Damit werden die vielen einzelnen Javascript Dateien zu einer einzigen zusammengefügt, geladen (nur noch ein http Request) und gleichzeitig mittels GZIP komprimiert (wenn die auf dem Server aktiviert ist).
Wenn alles fehlerfrei funktioniert ist der Punkt Combine external JavaScript gelöst.

Tipp: Mit diesem combine-Script kann nicht nur der Punkt Javascript-Dateien kombinieren, sondern auch CSS kombinieren gelöst werden.