Cache-Busting für Assets mit Jekyll

von Kevin Papst am 07.03.2019

Heute wieder ein kurzer Jekyll Tip: wer seine statischen Assets mit Jekyll generiert, zum Beispiel mit dem eingebauten Sass Compiler, der wird das Problem kennen: neue Styles eingefügt und im Browser ist nichts davon zu sehen.

Zum Beispiel sah mein CSS Tag vor dem Einfügen des Cache Busting so aus:

<link href="{{ '/assets/css/bundle.css' | absolute_url }}" rel="stylesheet" />

Im kompilierten Quelltext sah das Ergebnis dann so aus:

<link href="https://www.example.com/assets/css/bundle.css" rel="stylesheet" />

Eine einfache Form des Cache Bustings ist schon immer einen Timestamp an die URL anzuhängen. Dankenswerterweise gibt es in Jekyll den Zeitpunkt an dem die Seite neugebaut wurde als globale Variable:

{{ site.time }}

Was als Ergebnis dieses DateObject erzeugt:

2024-11-17 10:47:29 +0000

Wenn man dieses Date Objekt nun mit Hilfe des date Filters in einem Timestamp umwandelt, dann lässt es sich hervorragend als URL Parameter nutzen:

<link href="{{ '/assets/css/bundle.css' | absolute_url }}?{{ site.time | date: '%s%N'}}" rel="stylesheet" />

Et voilà, Cache-busting fertig:

<link href="https://www.example.com/assets/css/bundle.css?1551977838255583000" rel="stylesheet" />

Jetzt noch einmal committen und die Seite wird automatisch neu gebaut und in jedem Browser kommt das richtige Stylesheet an – keine komischen CSS Effekte mehr!