In der neuen Typo3 Version 4.3 existiert eine neue Klasse t3lib_PageRenderer in der die CSS und Javascript Dateien registriert werden können. In dieser Klasse ist es vorgesehen die CSS Dateien zu bündeln und zu komprimieren. Da diese Funktionen noch nicht implementiert sind und es aber die Möglichkeit für Hooks gibt habe ich die Extension js_css_optimizer erstellt, die diese Lücke füllt.

Die Extension registriert folgende Hooks:

• cssCompressHandler - zum Komprimieren der CSS Dateien
• jsCompressHandler - zum Komprimieren der JavaScript Dateien
• concatenateHandler - zum Bündeln der Dateien
• clearCachePostProc - zum Löschen der gecachten Dateien im typo3temp Verzeichnis

CSS Komrpimierung

Hierbei wird das Tool CSSTidy verwendet.  Die Konfiguration lässt sich über den Extension Manager in Typo3 einstellen.

Die CSS Datei wird in einem neuen Verzeichnis abgelegt. Die Extension versucht dabei die relativen Pfade in der CSS Datei auf Bilder um zuschreiben. Hier ist eventuell noch Anpassungbedarf.

Damit die CSS Datei komprimiert wird muss folgender Typo Script Code ergänzt werden:

page {
includeCSS {
 screenStyle = ..../base.css
 screenStyle {
   media = screen
   import = 0
   compress=1
 }

JavaScript Komprimierung

Für das JavaScript wird die JSMin Klasse aus dem Typo3 Core verwendet. Es wird nicht die t3lib::minify... verwendet, da diese nicht so effektiv ist.

In TypoScript kann die Komprimierung einzeln ein und ausgeschaltet werden:

page{
 includeJS {
 file1 = ....common.js
 file1.compress=1
...

Bündelung

Die Bündelung der Javascripte und CSS Dateien kann über TypoScript aktiviert werden.  Dafür gibt es diese Einstellung:

config.concatenateJsAndCss = 1

Hierbei ist nicht möglich CSS und JavaScript unterschiedlich zu behandeln. Deshalb gibt es in der Extension die Möglichkeit über den Extension Manager die Bündelung beispielsweise für CSS auszuschalten.

Wenn bestimmte Dateien auf jeder Seite benötigt werden, dann macht es Sinn diese als Libs einzubinden. Dafür gibt es im TypoScript die Option includeJSlibs.

page.includeJSlibs{
  jquery = ...jquery-1.3.2.min.js
  ...
}

Dann werden die in eine separate Datei geschrieben und können vom Browser separat gecacht werden.

Caching

Die komprimierten und gebündelten Dateien werden in dem typo3Temp Verzeichnis abgelegt. Die Cache Datei werden nicht erneuert sondern müssen gelöscht werden um neu erzeugt zu werden. Das Löschen passiert automatisch wenn im Typo3 Backend der Cache gelöscht wird.

Javascript und CSS aus den Plugins hinzufügen

Wenn man früher in einem Plugin JavaScript oder CSS Daten hinzufügen wollte ohne TypoScript hat man das über $GLOBALS['TSFE']->additionalHeaderData machen. Da diese Daten nicht als JS oder CSS deklariert sind nutzen sie in diesen Kontext nichts mehr.  Man kann jetzt mittels $GLOBALS['TSFE']->getPageRenderer() auf den PageRenderer zugreifen und diesen die JS und CSS Dateien bekannt machen. Wenn man mit dem PageRenderer arbeitet kann man auch die Vorteile der Komprimierung und Bündelung nutzen. Es lohnt sich deshalb die Klasse t3lib_PageRenderer genauer anzuschauen.

Der Apple Browser Safari hat ein ganz seltsames Problem CSS Dateien zu laden die über ein PHP Script generiert wurden. In einem Projekt hatte ich die CSS Dateien über ein PHP Script generiert, dass diese komprimiert, bündelt und cached. In der Seite war das Script dann ungefähr so eingebunden:

<link rel="stylesheet" type="text/css" href="/index.php?action=css"  />

Das hat im Safari bewirkt das dieses CSS gar nicht geladen wurde. Durch eine simple Änderung mittels Rewrite konnte der Browser dann die CSS Datei laden.

<link rel="stylesheet" type="text/css" href="/css/cached.css"  />

.htaccess
RewriteRule ^css/cached.css$ index.php?action=css