Traffic verringern: JavaScript-Dateien kombinieren

Für das Kombinieren und Minimieren von JavaScript-Dateien, habe ich UglifyJS2 auf GitHub gefunden.

Das ist ein Node.js-Modul. Um es zu verwenden, muss also Node.js installiert sein.

Um UglifyJS2 zu installieren, tippe Folgendes in ein Konsolen-Programm ein (ich benutze gerne PowerShell):

npm install uglify-js -g

Navigiere anschließend mit cd zu deinem Projekt-Ordner.

In meinem Beispiel sieht mein Projekt-Ordner so aus:

• js
  • jquery.js
  • main.js
  • search.js
• css
  • ...
• index.html

Führe nun diesen Befehl aus:

uglifyjs js/jquery.js js/main.js js/search.js -o js/script.min.js

Zuerst kommt der Befehl uglifyjs, anschließend die zu kombinierenden Dateien (durch Leerzeichen getrennt). Das -o steht für "Output" und kennzeichnet die Ausgabe-Datei. In diesem Fall js/script.min.js.

Wichtig bei der Eingabe ist auch die Reihenfolge der Dateien.

Anschließend müsste unser Ordner so aussehen:

• js
  • jquery.js
  • main.js
  • search.js
  • script.min.js
• css
  • ...
• index.html

Und aus:

wird:

Erweiterungen für Entwicklungsumgebungen?

Für Brackets habe ich ein passendes Plugin gefunden: JSCompiler2

Durch eine Konfigurations-Datei können somit auch die Ein- und Ausgabe-Dateien gespeichert werden, sodass für eine Neu-Kompilierung nur noch ein Knopfdruck nötig ist. Ziemlich praktisch also.

Für NetBeans scheint es nichts dergleichen zu geben. Für PHPStorm lässt sich UglifyJS anscheind einrichten: https://www.jetbrains.com/phpstorm/help/minifying-javascript.html

Ich habe auch einen Artikel über das Kombinieren von CSS-Dateien geschrieben: Website-Gestaltung: Beschleunigung durch Kombinieren von CSS-Dateien