Die (Un)Verträglichkeit von JavaScript/CSS-Dateien und Browser-Cache

      Kommentare deaktiviert für Die (Un)Verträglichkeit von JavaScript/CSS-Dateien und Browser-Cache

Eigentlich möchte man ja, dass die CSS und Javascript-Dateien nur einmal vom User herunter geladen werden und dann lange Zeit nicht mehr. Dieser Wunsch ist verständlich, da ja inzwischen Javascript/CSS-Frameworks wie jQuery viele Kilobyte belegen.
Man kann natürlich die alte Datei löschen und eine neue Datei referenzieren. Dies ist aber sehr aufwendig und wenn man irgendwo eine Stelle vergessen hat, wo die CSS/Javascript-Datei noch verwendet wird, kann es zu unschönen Nebeneffekten, bis hin zum Totalausfall der Seite, wegen fehlender CSS-Anweisungen, kommen.
Um das zu verhindern kann man mit einer einfachen RewriteRule in der .htaccess Datei wahre Wunder bewirken.
Mit der Zeile
RewriteRule ^(css|js)/(.*)\.(v_.*)\.(js|css)$ /$1/$2.$4 [L]
wird der Webserver angewiesen nach Anforderungen zu suchen, die CSS bzw. Javascript-Dateien aus dem jeweiligen Verzeichnis laden wollen.
Das „Geheimnis“ der Regel, ist der Abschnitt (.*)\.(v_.*)\.(js|css). Es wird nach einem Dateiname gesucht, die in der Mitte „v_“ enthält und am Ende eine JS/CSS-Datei ist. Wenn diese gefunden wird, wird der Zweite und der Vierte Teil der Anforderung umgesetzt.
Der Mittlere Teil mit dem „v_“ wird einfach ignoriert. Somit ist es möglich, ein und die selbe Datei immer wieder zu bearbeiten, z.B. die main.css, und im Quellecode der Seite steht dann bei der einen Seite main.v_1.1.css und auf einer anderen main.v_1.2.css. Im Hintergrund wird immer die gleiche Datei geladen.