Im WWW ist sie kaum noch wegzudenken: Die Skriptsprache JavaScript. Sie dient unter anderem zur Dynamisierung der Inhalte einer Website. Der JS-Quellcode wird im HTML zwischen den script-Tags eingebunden oder dort mittels Attribut aus einer externen Datei geladen:
<script src="script.js"></script>Wie bereits im letzten Teil der Serie erklärt wurde, ist es wichtig, dass so wenig Dateien wie möglich eingeladen werden. Das gilt auch für den eingebundenen JavaScript-Code. Die Ziele sind folgende:
- Skriptdateien zusammenfassen
- Quellcode minifizieren
Skriptdateien zusammenfassen
Auf einer Website können mehrere Skript-Dateien eingebunden werden. Wird eine Website in einem Web-Browser aufgerufen, läd dieser in der Regel 6 Dateien gleichzeitig. Dabei werden neben dem Skript auch Bilder, CSS-Dateien und weitere Elemente der Seite geladen. Deswegen ist es sinnvoll, die Anzahl der eingebundenen Dateien möglichst gering zu halten. Dies kann durch das Zusammenfassen aller erforderlichen Skript-Dateien zu einer Datei umgesetzt werden.
Quellcode minifizieren
Das weitere Vorgehen besteht in der Komprimierung der zusammengefassten Skript-Datei. Quellcode enthält oft für den Interpreter unwichtige Zeichen wie Zeilenumbrüche, Tabstopps und Kommentare. Diese Zeichen dienen nur dem Verständnis sowie der Förderung der Lesbarkeit und können daher restlos aus dem Quellcode entfernt werden. Durch diese Operation lässt sich die Größe der Skript-Datei um ein Vielfaches verkleinern, wodurch die Ladezeit der Datei verringert wird.
Folgende Elemente können restlos entfernt werden:
- Zeilenumbrüche
- Tabstops
- Kommentare
- Zeilenumbrüche
- Aufeinander folgende Leerzeichen
MODX Snippet
Durch das folgende MODX-Snippet „minimize-js“ kann die Performance beim Laden das JavaScripts mit den zuvor beschriebenen Operation simpel verbessert werden. Der Aufruf des Snippets erfolgt durch [[minimize_js? ]]. Durch das Snippet werden die übergebenen Dateien zusammen gefasst und komprimiert. Da es sich um eine simple Komprimierung handelt, führen einzeilige If-Abfragen, welche einen Zeilenumbruch enthalten, zu einer fehlerhaften Ausgabe.
Parameter
| Name | Beschreibung |
|---|---|
| srcFiles | Pfade zu den JavaScript-Dateien, welche zusammengefasst und komprimiert werden sollen. Pfade werden durch ein Komma getrennt. |
Quellcode des MODX-Snippets
<?php<br>
<br>
$srcFiles = $modx->getOption('srcFiles', $scriptProperties);<br><br>
/* Leerzeichen entfernen */<br>
$srcFiles = str_replace(" ", "", $srcFiles);<br><br>
/* Parameter aufsplitten */<br>
$params = explode(",",$srcFiles);<br><br>
$output = "";<br><br>
/* Source-Dateien optimieren */<br>
foreach($params as $file)<br>
{<br><br>
/*Dateiinhalt auslesen */<br>
$string = file_get_contents($file);<br><br>
/* Einzeile Kommentare entfernen */<br>
$string = preg_replace("/[^:](\/\/.*)/", "\n", $string);<br><br>
/* Mehrzeilige Kommentare entfernen */<br>
$string = preg_replace("/(\/\*.*\*\/)/s", "\n", $string);<br><br>
/* carriage returns durch Zeilenumbruch ersetzen */<br>
$string = str_replace("\r", "\n", $string);<br><br>
/* tabs durch Leerzeichen ersetzen */<br>
$string = str_replace("\t", "\n", $string);<br><br>
/* Mehrere Zeilenumbrueche durch einen ersetzen */<br>
$string = preg_replace("/\n+/", "\n", $string);<br><br>
/* Zeilenumbrueche an schließenden Klammern durch Semikolons ersetzen */<br>
$string = preg_replace("/[)]\n/", ");", $string);<br><br>
/* Entfernt das Semikolon an If-Abfragen und Schleifen */<br>
$string = str_replace(");{", "){", $string);<br><br>
/* Entfernt das Semikolon am Punkt-Operator */ <br>
$string = str_replace(");.", ").", $string);<br><br>
/* Entfernt das Semikolon an zwei aufeinander folgenden runden Klammern*/<br>
$string =preg_replace("/[);]\s+[);]/", ")", $string);<br><br>
/* Restliche Zeilenumbrüche entfernen*/<br>
$string = preg_replace("/\n/", "", $string);<br><br>
/* Mehrere Leerzeichen durch ein Leerzeichen ersetzen */<br>
$string = preg_replace("/\s+/", " ", $string);<br><br>
$output = $output.$string;<br>
}<br>
<br>
return $output;<br>
?>
Verwendung
Nachdem mit dem zuvor beschriebenen Quellcode das MODX-Snippet erstellt wurde, muss dieses in die Website eingebunden werden. Dazu wird eine neue Ressource vom Content-Type „javascript“ erzeugt und das Snippet mit
[[minimize_js? &srcFiles=`js/script1.js,js/script2.js,js/script3.js`]]eingebunden. Zu beachten ist, dass der Aufruf des Snippets ohne ein Ausrufungszeichen nach der zweiten öffnenden eckigen Klammer erfolgt, damit das Snippet gecacht wird. Durch das Cachen des Snippets wird zusätzliche Ladezeit gespart, da die Datei nicht neu geladen werden muss.
Die zuvor erstellte Ressource wird im Footer durch
<script src="ressourcen-name.js"></script>Fazit
Durch die Verwendung des MODX-Snippet konnten wir die Größe unserer JS-Datei um 60% reduzieren. Hier bewegen wir uns ebenfalls im KB-Bereich. Dank moderner Datenübertragungstechniken spielt das Einsparen von KBs in der heutigen Zeit kaum noch eine Rolle. Aber auch hier gilt: „Serverentlastung bei Lastzeiten“ und „VDSL, Glasfaser und LTE sind nicht immer verfügbar“.
Bei dieser Methode der Komprimierung handelt es sich um ein simples Verfahren, welches eine Alternative zu externen Programmen, wie zum Beispiel dem Closure Compiler von Google, liefert. Durch das MODX-Snippet bleibt die gesamte Kontrolle bei dem Programmierer der Website und der Quellcode wird nicht an eine externe Schnittstelle gesendet.