Relativ viel Performance kostet es, mehrere Javascript und/oder Stylesheet Dateien einzubinden. Zwar geht die Abarbeitung relativ fix dank keep-alive aber dennoch kostet es Zeit. Bestimmte Javascript Bibiotheken bestehen ja schonmal locker aus 10 Dateien.

Daher kann es sinnvoll sein, mehrere Dateien in einer Zusammenzufassen.

Weiterhin ist so die Möglichkeit gegeben, evtl noch etwas nachzubearbeiten um weitere Dateigröße einzusparen.

Besonders User mit langsammen Verbindungen würden dies dankbar annehmen.

Nehmen wir also an, wir nutzen folgende beiden Dateien:

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

dann ersetzen wir das durch:

<script src=”javascript.php” type=”text/javascript”></script>

Dieses müssen wir dann nur noch wie folgt anlegen:

<?php
header(‘Content-type: application/javascript’); //Typ setzen
//Dateien ausgeben
require_once(’script/script1.js’);
require_once(’script/script2.js’);
?>

Das wars auch schon. Nun werden beide Dateien in einer ausgegeben. Dabei muss lediglich drauf geachtet werden das alles mit einem Semikolon abgeschlossen wird (auch die letzte Zeile der einzelnen Dateien!)

Der obrige Code kann noch weiter optimiert werden. Zuerst einmal könnten wir dem Browser sagen, das er die Script Datei Cachen soll, so muss sie lediglich einmal übertragen werden:

header (“cache-control: must-revalidate; max-age: 2592000″);
header (“expires: ” . gmdate (“D, d M Y H:i:s”, time() + 2592000) . ” GMT”);

zweitens:
es könnten alle Zeilenumbrüche entfernt , kommentare gefiltert und doppelte Leerzeichen durch einzelne ersetzt werden. Bei Dateien mit mehreren (tausend) Zeilen lässt sich so nochmal (ordentlich) Platz gespart werden:

function verkleiner($data) {
// Kommentare entfernen
$data = preg_replace(‘!/\*[^*]*\*+([^/][^*]*\*+)*/!’, ”, $data);
// Zeilenumbruch und Tab entfernen
$data = str_replace(array(“\r\n”, “\r”, “\n”, “\t”), ”, $data);
//Doppelte Leerzeichen entfernen
$data = preg_replace(‘/\s\s+/’, ‘ ‘, $data);
return $data;
}

und drittens können wir zusätzlich noch evtl verfügbare Komprimierungstechniken benutzen:

header(‘Content-Length: ‘ . strlen($data));
if (stripos($_SERVER["HTTP_ACCEPT_ENCODING"],‘x-gzip’) !== false) {
header(“Content-encoding:x-gzip”);
$data = gzencode($data);
}
elseif (stripos($_SERVER["HTTP_ACCEPT_ENCODING"],‘gzip’) !== false) {
header(“Content-encoding:gzip”);
$data = gzencode($data);
}
elseif (stripos($_SERVER["HTTP_ACCEPT_ENCODING"],‘deflate’) !== false) {
header(“Content-encoding:deflate”);
$data = gzdeflate($data);
}

Somit sieht die verkleiner funktion insgesammt wie folgt aus:

function verkleiner($data) {
// Kommentare entfernen
$data = preg_replace(‘!/\*[^*]*\*+([^/][^*]*\*+)*/!’, ”, $data);
// Zeilenumbruch und Tab entfernen
$data = str_replace(array(“\r\n”, “\r”, “\n”, “\t”), ”, $data);
//Doppelte Leerzeichen entfernen
$data = preg_replace(‘/\s\s+/’, ‘ ‘, $data);
header(‘Content-Length: ‘ . strlen($data));
if (stripos($_SERVER["HTTP_ACCEPT_ENCODING"],‘x-gzip’) !== false) {
header(“Content-encoding:x-gzip”);
$data = gzencode($data);
}
elseif (stripos($_SERVER["HTTP_ACCEPT_ENCODING"],‘gzip’) !== false) {
header(“Content-encoding:gzip”);
$data = gzencode($data);
}
elseif (stripos($_SERVER["HTTP_ACCEPT_ENCODING"],‘deflate’) !== false) {
header(“Content-encoding:deflate”);
$data = gzdeflate($data);
}
return $data;
}

Jetzt müssen wir nur noch die Javascript Dateien anders einlesen so das wir sie bearbeiten können und das ganze sieht wie folgt aus:

<?php
function verkleiner($data) {
// Kommentare entfernen
$data = preg_replace(‘!/\*[^*]*\*+([^/][^*]*\*+)*/!’, ”, $data);
// Zeilenumbruch und Tab entfernen
$data = str_replace(array(“\r\n”, “\r”, “\n”, “\t”), ”, $data);
//Doppelte Leerzeichen entfernen
$data = preg_replace(‘/\s\s+/’, ‘ ‘, $data);
header(‘Content-Length: ‘ . strlen($data));
if (stripos($_SERVER["HTTP_ACCEPT_ENCODING"],‘x-gzip’) !== false) {
header(“Content-encoding:x-gzip”);
$data = gzencode($data);
}
elseif (stripos($_SERVER["HTTP_ACCEPT_ENCODING"],‘gzip’) !== false) {
header(“Content-encoding:gzip”);
$data = gzencode($data);
}
elseif (stripos($_SERVER["HTTP_ACCEPT_ENCODING"],‘deflate’) !== false) {
header(“Content-encoding:deflate”);
$data = gzdeflate($data);
}
return $data;
}
header(‘Content-type: application/javascript’); //Typ setzen
header (“cache-control: must-revalidate; max-age: 2592000″); //Caching
header (“expires: ” . gmdate (“D, d M Y H:i:s”, time() + 2592000) . ” GMT”);
$text=file_get_contents(’script/script1.js’);
$text.=file_get_contents(’script/script2.js’);
echo verkleiner($text);
?>

Dies funktioniert natürlich auch mit CSS Dateien. HTML Seiten sollte man so nicht ausliefern da die Formatierung für bestimmte Elemente (z.B. pre) zerstört werden würde.
Ich weise allerdings nochmal darauf hin, das die Javascript Dateien sauber geschrieben sein müssen und auch die letzte Klasse in einer Datei mit einem Semikolon beendet werden muss!