Schnellschluck -Cache -Busting

Für eine optimale Webleistung ist die Implementierung robuster Caching -Strategien für Vermögenswerte wie CSS, JavaScript, Bilder und Schriftarten von entscheidender Bedeutung. Auf diese Weise können Browser diese Dateien beibehalten und die Seitenladezeiten bei Wiederholungen oder die Navigation innerhalb einer Site erheblich beschleunigen. Die Aktualisierung dieser Vermögenswerte erfordert jedoch eine Methode, um den Browser zum Herunterladen der frischen Versionen zu zwingen. Während verschiedene Techniken vorhanden sind, beschreibt dieser Artikel einen aktuellen Ansatz mit Gulp.

Nutzen Sie die Änderung der Abfrage -Zeichenfolge für das Cache -Busting

Im Gegensatz zu früheren Überzeugungen bleibt die Änderung der Abfragezeichenfolge eine effektive Methode für das Cache -Busting, insbesondere bei Diensten wie Cloudflare mildern potenzielle Kantenfälle.

Anfänglich kann Ihr HTML wie folgt auf Asset -Links enthalten:

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

Anschließend ändern Sie den Wert der Abfragebarstellung, um eine Cache -Aktualisierung zu erzwingen:

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

HTML selbst verfügt normalerweise über kürzere Cache -Dauern oder ist nicht zwischengespeichert, wodurch die sofortige Sichtbarkeit von HTML -Änderungen sichergestellt wird.

Handbuch vs. automatisierter Cache -Busting

Zuvor beinhaltete das manuelle Cache -Busting eine direkte Änderung einer PHP -Variablen:

  php $ ver = 1,0; ?> <link href="style.css?v=<?php%20echo%20%24ver;%20?>" rel="stylesheet"><link href="some-other-asset.css?v=<?php%20echo%20%24ver;%20?>" rel="stylesheet">

Diese Methode erwies sich zwar funktionsfähig, war zwar anfällig für die Aufsicht und war im Allgemeinen umständlich.

Automatisierung mit Schluck und Gulp-Replace

Der Einsatz eines Gulp-basierten Bauprozesses, der Aufgaben wie SASS-Kompilierung, Babeltranspilation und Dateiverzögerung übernimmt, ermöglicht automatisiertes Cache-Busting. Das gulp-replace Plugin vereinfacht diesen Prozess.

Eine Gulp-Aufgabe kann erstellt werden, um nach einer bestimmten Zeichenfolge (z. B. cache_bust= ) in Header-Dateien zu suchen und sie durch einen dynamisch generierten Zeitstempel-basierten String zu ersetzen:

 gulp.task ("cache-bust-css", function () {
  var cbstring = new Date (). GetTime ();
  Gulp zurückgeben
    .src (["Header.php"])
    .Rohr(
      ersetzen ( /cache_bust = \ d /g, function () {
        return "cache_bust =" cbstring;
      })
    )
    .Pipe (gulp.dest ("."));
});

Eine ähnliche Aufgabe kann für JavaScript -Dateien implementiert werden.

Optimierung für die Effizienz

Die aktuelle Implementierung aktualisiert die Abfragezeichenfolge für alle CSS -Vermögenswerte, wenn sich ein Vermögenswert ändert. Ein effizienterer Ansatz würde nur auf die geänderten Dateien abzielen. Diese Optimierung ist für die zukünftige Implementierung geplant.

Diese schlupfbasierte Strategie ist nur ein Ansatz. Andere Gulp -Plugins und Build -Systeme bieten alternative Methoden. Diese Lösung befasst sich effektiv mit den spezifischen Anforderungen dieses Projekts. Fühlen Sie sich frei, Ihre bevorzugten Cache-Busting-Techniken zu teilen!

Das obige ist der detaillierte Inhalt vonSchnellschluck -Cache -Busting. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!