Caching für Assets (in der Entwicklung) verhindern

Veröffentlicht: 20. Mai 2019 von Matze – Kommentar hinterlassen Letzte Aktualisierung: 14. Februar 2022

Browser-Caching ist eine tolle Sache, aber während der Entwicklung kann es oftmals hinderlich sein, schließlich möchte man immer die neueste Dateiversion anzeigen. Standardmäßig werden in WordPress insbesondere JavaScript- und CSS-Dateien mit einem sogenannten Query-Parameter ausgestattet. Dieser erlaubt es, beim Erhöhen der Version des Projekts dafür zu sorgen, dass alle Browser die neueste Version der Dateien laden.

Im Quellcode kann das beispielsweise folgendermaßen aussehen:

<link rel="stylesheet" href="style.css?v=2.1.0">Code-Sprache: HTML, XML (xml)

Hierbei lädt man nun die style.css, die mit der Projektversion 2.1.0 ausgeliefert wurde. Solange sich hier der Parameter nicht ändert, nutzt der Browser beim erneuten Aufruf immer genau diese Version der Datei. Zwar kann man die Datei style.css auf dem Server ändern, aber solange man keine andere Version als Parameter anhängt, geht der Browser davon aus, dass sich die Datei auch nicht geändert hat und zeigt dann auch die Änderung der Datei nicht an.

Gerade bei Plugins und Themes, die im produktiven Umfeld auf jeden Fall mit einem Query-Parameter ausgestattet sein sollten, kann das in der Entwicklung schnell dazu führen, dass die neuesten Änderungen an den Dateien nicht angezeigt werden.

Query-Parameter dynamisch ändern

Hier hilft es, den Parameter, der als Version hinterlegt ist, dynamisch zu ändern. Als sehr praktischer Parameter hat sich die jeweils aktuelle Zeit erwiesen. Als UNIX-Zeitstempel (Timestamp) verändert sich diese nämlich jede Sekunde. Außerdem ist sie fortlaufend und daher immer einzigartig. Wenn man bei jedem Aufruf demnach den aktuellen Zeitstempel angibt, verhindert man jegliches Caching.

Per Zeitstempel

Beispiel:

wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/style.css', [], time() );Code-Sprache: PHP (php)

Hier wird demnach lediglich mit der PHP-Funktion time() der aktuelle Zeitstempel als Version ausgegeben. Im HTML-Quellcode sieht das dann folgendermaßen aus (zwei beispielhafte Aufrufe nacheinander):

<link rel="stylesheet" href="style.css?v=1547290800">
<link rel="stylesheet" href="style.css?v=1547290803">Code-Sprache: HTML, XML (xml)

Per Modifikationszeitpunkt

Auch hierfür eignen sich Zeitstempel. Nämlich der Zeitstempel, an dem sich die Datei das letzte Mal geändert hat. Dieser Modifikationszeitpunkt lässt sich in PHP mit der Funktion filemtime() abfragen.

Beispiel:

$css_file = get_stylesheet_directory() . '/style.css';
$css_uri = get_stylesheet_directory_uri() . '/style.css';
wp_enqueue_style( 'custom-style', $css_uri, [], filemtime( $css_file ) );Code-Sprache: PHP (php)

Dabei wird einmal der absolute Pfad der CSS-Datei auf dem Server in eine Variable gespeichert ($css_file) sowie deren URI (damit der Befehl wp_enqueue_style am Ende übersichtlicher ist). Dann wird von dieser lediglich der letzte Modifikationszeitpunkt mit filemtime() abgefragt.

Auch dieses Beispiel erzeugt eine Ausgabe wie oben, allerdings verändert sich der Query-Parameter nicht bei jedem Aufruf, sondern bleibt solange derselbe, bis man die Datei wieder modifiziert. Das kann beispielsweise beim nächsten Update der Fall sein, oder während der Entwicklung immer dann, wenn man etwas an der Datei ändert und daher auch diese Änderung anzeigen lassen möchte.

Damit erreicht man mit wenig Aufwand ein effizientes Caching, das dennoch die Entwicklung nicht behindert.