CSS/JS URLs und der Browser Cache

7. März 2017

CSS und JS URLs sollten vom Browser gecached werden können, und das möglichst nicht nur für 10 Minuten (wie es bisher der Default bei womodo ist), sondern für mindestens eine Woche (wie es Google empfiehlt).

Was aber, wenn dann das CSS oder JS geändert wird? Die URL bleibt die gleiche und Browser verwenden ihren Cache statt die geänderten Version zu laden. Die Lösung ist ein sich mit jeder Änderung neuer URL-Parameter an den Script-URLs. Aber das sollte möglichst "automatisch" passieren, denn als Projektentwickler vergißt man das schnell.

Im kommenden Basic-Website-Kit-2 (BWK2) haben wir das nun genau so implementiert. Das BWK2 berechnet für die zentralen CSS und JS URLs einen hashcode und fügt diesen als URL-Parameter hinzu.

<script type="text/javascript" src="/js/app.js?v=1043524322"></script>

In bestehenden Projekten kann das seit womodo 7.3 auch "manuell" hinzugefügt werden. Hier der notwendige Code als Beispiel:

<tml:script>
    var code = WGA.design().resolve("my-script").getJavaScriptCode();
    _hash = javaObject(code).hashCode();
</tml:script>
<script src="<tml:url type="js" name="my-script" u-v="_hash"/>"></script>

Für CSS verwendet man entsprechend

WGA.design().resolve("my-css").getCSSCode();

Sowohl getJavaScriptCode() als auch getCSSCode() berücksichtigen dabei JSMIN-Code bzw. SASS-Code.