Print-Version Jetzt Buch bestellen
16.5 Caching von CSS- und JavaScript-Dateien 
Grundlagen
Mehrere Dateien
Die meisten Websites binden mehrere CSS- bzw. JavaScript-Dateien ein. Aufgrund der vielen HTTP-Zugriffe ist das jedoch nicht performant.
Eine Datei
Ein einfache Lösung besteht darin, alle CSS- bzw. JavaScript-Dateien in jeweils einer Datei zusammenzufassen, d. h. alle CSS-Dateien z. B. in der Datei all.css und alle JavaScript-Dateien in der Datei all.js.
Beispiel
Angenommen, wir haben im Verzeichnis public/stylesheets die CSS-Dateien style_1.css, style_2.css und style_3.css . Wir können diese Dateien z. B. in dem Template index.html.erb oder in der Layoutdatei application.html.erb mit Hilfe der Helper-Methode stylesheet_link_"=tag einbinden:
Listing /app/views/layout/application.html.erb
... <%= stylesheet_link_tag 'style_1' %> <%= stylesheet_link_tag 'style_2','style_3' %> ...
Wenn wir die entsprechende Seite im Webbrowser aufrufen und uns den generierten Quelltext anschauen, sehen wir, dass drei Links erstellt wurden:
Listing localhost:3000
... <link href="/stylesheets/style_1.css... /> <link href="/stylesheets/style_2.css... /> <link href="/stylesheets/style_3.css... /> ...
Wenn wir innerhalb der Methode stylesheet_link_tag das Caching mit der Option :cache => true aktivieren, erkennen wir im HTML-Quelltext, dass die drei Stylesheet-Dateien in einer Datei all.css zusammengefasst wurden.
Listing /app/views/layout/application.html.erb (Caching aktivieren)
... <%= stylesheet_link_tag 'style_1', :cache => true %> <%= stylesheet_link_tag 'style_2','style_3', :cache => true %> ...
Listing Stylesheet-Dateien werden zusammengefasst
... <link href="/stylesheets/all.css... /> ...
| Aktivierung des Caching |
| Auch wenn die Option :cache verwendet wird, wird das Caching nur dann durchgeführt, wenn die Caching-Einstellung in einer Environment-Datei auf true gesetzt ist (siehe Abschnitt caching-einstellungen auf Seite caching-einstellungen). |
Es ist auch möglich, den Namen für die zusammengefasste Stylesheet-Datei selbst zu wählen, indem Sie statt true, einfach einen Namen (ohne die Extension .css) angeben:
Listing /app/views/layout/application.html.erb
... <%= stylesheet_link_tag 'style_1', :cache => 'styles' %> <%= stylesheet_link_tag 'style_2','style_3', :cache => 'styles' %> ...
Die Dateien werden dann in die Datei styles.css zusammengefasst.
Um automatisch alle Dateien aus dem Verzeichnis public/stylesheets einzubinden, gibt man statt der Namen der Stylsheets einfach die Option :all an:
Listing StyleSheet-Dateien wurden zusammengefasst.
<%= stylesheet_link_tag :all %>
Die Helper-Methode javascript_include_tag funktioniert analog zu der cache -Option.
Löschen der Cache-Dateien
Das Löschen der Cache-Dateien ist in der Regel nicht notwendig, da beim Hochladen (deploying) auf einen Server mit dem Capistrano-Befehl cap deploy das Projekt aus dem SVN-Repository in ein neues Verzeichnis kopiert wird. In diesem Ordner sind dann keine Cache-Dateien vorhanden.
Ihre Meinung
Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.
