[Javascript] Javascript Kombinierer & Kompressor

[Adromir]

Da ich schon öfters das Problem hatte, daß bei meinen Seiten Javascriptfunktionen nicht geladen wurden, wenn ich mehrere externe Javascripts auf meiner Seite eingebettet habe, hab ich heute dieses Script geschrieben.

Was macht es?
Es fügt mehrere externe Javascriptdateien zu einer einzigen zusammen.
Man muss also nicht mehr sowas wie:

<script src="script1.js" type="text/javascript"></script>
<script src="script2.js" type="text/javascript"></script>
<script src="script3.js" type="text/javascript"></script>

Schreiben, sondern ein einfaches

<script src="js-combiner.php" type="text/javascript"></script>

reicht dann aus.

Zu recht werden sich jetzt einige Fragen: "Und was bringt mir das? Ich kann die Dateien ja auch per Hand zusammenkopieren?"

Hier die Antwort darauf:
Das Script kombiniert nicht nur die Dateien, sondern ist noch mit verschiedenen Methoden ausgerüstet, um Daten und Ladezeit zu sparen.

1. Die zusammengesetzten Dateien werden auf dem Webspace gecached
2. Die Dateien können per mod_gzip oder das zlib Modul gzipped ausgeliefert werden um Dateigröße und damit Bandbreite und Ladezeiten zu sparen.
3. Überflüssige Codebestandteile, wie Kommentare, Doppelte Leerzeichen und Zeilenumbrüche werden entfernt um die Größe weiter zu drücken.
4. Alle Optionen können per Konfiguration abgeschaltet werden.

Als Beispiel: Ich hab mal als Test das prototype Framework und die Mootools geladen. Die Größe der Gesamtdatei sank mit allen Optionen von 137K auf schlanke 24K.

Wenn ihr fragen zu dem Script habt, oder es euch gefällt, schreibt einfach hier rein.

Script ist als gezippte Datei an diesen Beitrag angehängt.
Die Dokumentation ist auf Englsich (btw. wenn jemand da was auffällt, wegen Rechtschreibfehler oder Ausdrucksweise, wäre ich für Hinweise sehr dankbar).

gruß
Adromir

[Rizzo]

Hi,

hört sich interessant an, werde ich mir mal anschauen.
Danke für das Script!

[Adromir]

Wenn du verbesserungsvorschläge hast, immer her damit. Bin ja nicht so ein Profiprogrammierer

[Adromir]

*überleg* Mit einer kleinen Anpassung wäre es auch CSS- tauglich.
Wenn gewünscht, könnte ich eine zweite CSS- Version basteln, die auch typische (und einfache) Codeveränderungen macht (z.B. aus #FFFFFF #FFF oder aus 0px einfach 0), solange die Sachen nicht zu komplex sind und einen CSS- Parser benötigen... Obwohl.. Warum nicht auch das

[Rizzo]

Hallo Andreas,

da das Forum ja einige Tage down war habe ich die Zeit genutzt und mal einige Scripts getestet, so auch den JS-Combiner. Leider muß ich dir sagen das der Combiner nicht immer anwendbar ist. Einige JS-Scripts haben Probleme damit wenn die Whitespaces entfernt wurden. Mit Probleme meine ich, daß sie schlicht nicht funktionieren - ein Beispiel habe ich mal angehängt. Es ist ein simples Script um Tabs zu erzeugen, daß mit Whitespaces = false (keine Whitespaces entfernen) korrekt funktioniert und mit Whitespaces = true (Whitespaces entfernen) seinen Dienst verweigert.

Ein weiteres Problem das auftrat (das mir allerdings gerade auch nicht einleuchten will) ist, das (manchmal?!) eine weiße Seite ausgegeben wird, wenn man die mod_gzip Kompression im JS-Combiner verwendet, aber zuvor ob_start("ob_gzhandler") manuell gestartet wurde. Das scheint eine verschachtelte Kompression zu erzeugen die Probleme verursachen kann.

Treten die beiden genannten Probleme nicht auf, funktioniert das Script soweit aber gut.
Die Erweiterung für CSS hört sich gut an und dürfte auch weniger anfällig sein, also go for it!

Viele Grüße,
Andreas

[Adromir]

Hallo Rizzo. Das mit den Whitespaces hab ich auch schon gemerkt. Das ist wohl sehr stark vom Javascript selbst abhängig. Denn ebenso kann die Funktion Kommentare zu entfernen das gleiche Problem bedeuten.

Das mit der mod_gzip Sache, ist ebenso bekannt.

Für beide Probleme habe ich leider keine programmiererische Lösung. Ich denke, daß ich da nur die Doku mit den entsprechenden Hinweisen erweitern kann. Aber vieleicht hast du da ne Möglichkeit?

[Malleus]

@Rizzo: Die Probleme kenne ich auch bei meinem "Lieblingskomprimierer" : Du mußt absolut syntaktisch korrekte Scripte schreiben. Dabei gilt: Lieber ein ";" zuviel als zu wenig. Ich hab' da manchmal "ewig" gesucht bis alles wieder lief.

@Adromir: Hatte leider noch keine Zeit, mir Dein "Tool" anzuschauen, werd's aber mal austesten.

[DSB]

Eine Frage: ist es bei der Einbindung per Endung .php nicht so, dass die Datei immer neu vom Server abgeholt wird und damit das browserinterne Caching verhindert wird? Ich bin mir da gerade nicht sicher.

[Adromir]

Also ich hab eigentlich einen Header eingefügt, der das Browserinterne Caching eigentlich explizit aktivieren sollte.. Der Cache verfällt dann zeitgleich mit der Cachedatei auf dem Server.

[DSB]

Abgesehen davon, das ich das von Dir eingangs erwähnte Problem noch nicht hatte, sehe ich dann trotz Deiner lobenswerten Verkleinerungsmethode der Datei aber keinen Vorteil.
Mir ist es doch lieber, dass einmal eine 124k große Datei geladen und anschließend aus dem Cache geholt wird, als bei jedem Seitenaufruf erneut 24k. Bei 5 Seitenaufrufen ist der Vorteil dahin. Gut, letztlich ist die Verkleinerung der JS-DAtei ja auch unabhängig davon, aber wirkt es nicht eher hinderlich wenn die Dateien jedes mal neu geladen werden?

[Adromir]

Wie schon gesagt, eigentlich müsste der Browser die Datei auch cachen. Er wird ja explizit dazu angehalten.
Desweiteren wäre mir nicht bekannt, daß *.php Dateien vom Browser nicht gecached werden, hab es schon oft genug anders erlebt.

Wem das mit dem Caching noch nicht ganz geheuer ist, der kann den Kombiner als *.js in einen Unterordner speichern und dort eine .htaccess- Datei mit dem Inhalt

addtype application/x-httpd-php .js

ablegen.
Dann sollte es ganz sicher mit dem cachen der Datei im Browsercache klappen.

Je nachdem, wie die Scripte sind, ist der komprimierungsgrad noch höher.
Mein Rekord war bis jetzt Scripte in der Größe von 300k auf ca. 24k zu verkleinen.