Schnelles Gulp Cache Busting

Sie sollten auf jeden Fall weitreichende Cache-Header für Ihre Assets wie CSS und JavaScript (und Bilder und Fonts und was auch immer sonst) setzen. Das sagt dem Browser: „Behalte diese Datei im Grunde für immer.“ So muss der Browser sie beim Navigieren von Seite zu Seite auf einer Website – oder beim erneuten Besuch oder Aktualisieren der Seite – nicht erneut herunterladen, was zu deutlich schnelleren Seitenladezeiten führt. Das ist für die Web-Performance enorm wichtig, also tun Sie es!

Aber wie zwingen Sie den Browser, eine frische Version der Datei zu erhalten? Nun, es gibt eine ganze Reihe von Möglichkeiten. Schauen Sie sich diesen Blogbeitrag für mehr an. Aber hier ist eine, die ich kürzlich verwendet habe und die ich dokumentieren wollte.

Der Trick ist, den Query-String zu ändern

Es gab eine Zeit, in der die vorherrschende Meinung war, dass die Änderung des Query-Strings nicht ausreicht, aber selbst dann waren die Gründe, warum es nicht funktionierte, meist Randfälle. Heutzutage ist die Änderung des Query-Strings in Ordnung (vorausgesetzt, Sie ändern das Standardverhalten nicht, Dienste wie Cloudflare lassen Sie es tun).

Also, eines Tages liefern Sie es in Ihrem HTML so aus

<link rel="stylesheet" href="style.css?v=1" />

Dann ändern Sie diesen Query-String, um den Cache zu leeren, wenn Sie es brauchen

<link rel="stylesheet" href="style.css?v=2" />

Der HTML-Teil wird übrigens entweder nicht gecached oder für eine viel kürzere Zeit gecached, sodass Änderungen am HTML gesehen werden.

Ich mache es manchmal von Hand

Viele Jahre lang habe ich den Cache auf dieser Website geleert, indem ich eine PHP-Variable gesetzt und sie verwendet habe, um Assets zu ändern, wie zum Beispiel…

<?php $ver = 1.0; ?>

<link rel="stylesheet" href="style.css?v=<?php echo $ver; ?>" />
<link rel="stylesheet" href="some-other-asset.css?v=<?php echo $ver; ?>" />

Hey, das funktioniert, aber ich habe diese Variable von Hand manipuliert. Manchmal habe ich vergessen, es zu tun, und selbst wenn ich mich erinnert habe, habe ich mich irgendwie geärgert, es tun zu müssen.

Automatisches Version-Busting mit Gulp

Ich verwende derzeit einen Gulp-gesteuerten Build-Prozess auf dieser Website, der alle klassischen Dinge erledigt: Sass, Babel, Dateiverkettung, Live-Reload…

Mir fiel auf, dass ich Gulp auch dazu bringen könnte, den Query-String zu ändern, wann immer Änderungen an CSS oder JavaScript vorgenommen werden. JavaScript hat eine .replace() Methode, und diese ist in Node/Gulp einfach mit dem gulp-replace Plugin verfügbar.

Ich erstelle eine Aufgabe. Wenn ich sie aufrufe, sucht sie in meiner Header-Datei nach dem String cache_bust= plus einem Wert und ersetzt ihn durch einen neuen zufälligen String, basierend auf Datum und Uhrzeit.

gulp.task("cache-bust-css", function() {
  var cbString = new Date().getTime();
  return gulp
    .src(["header.php"])
    .pipe(
      replace(/cache_bust=\d+/g, function() {
        return "cache_bust=" + cbString;
      })
    )
    .pipe(gulp.dest("."));
});

Das Gleiche mache ich in einer separaten Aufgabe, wenn JavaScript-Dateien bearbeitet und kompiliert werden.

Es ist immer noch ein bisschen dumm

Beachten Sie, dass ich den Query-String bei allen CSS-Assets ändere, jedes Mal, wenn sich eines davon ändert. Das ist nicht so effizient, wie es sein könnte. Ich sollte wahrscheinlich nur den Query-String bei den geänderten Dateien ändern.

Ich werde es irgendwann angehen. Manchmal muss man einfach Schritt für Schritt zu besseren Lösungen gelangen.

---

Dies ist nur eine Methode! Es gibt weitere Gulp-Plugins speziell dafür. Andere Build-Systeme haben unterschiedliche Ansätze. Dieser Ansatz hat sich für mich und meine genauen Bedürfnisse zu der Zeit gut bewährt. Teilen Sie gerne Ihre Strategie mit!