HTTP-Caching-Verhalten konfigurieren

Jeff Posnick

In diesem Codelab erfahren Sie, wie Sie die von einem Node.js-basierter Webserver, auf dem die Bereitstellung von Express ausgeführt wird Framework. Es wird auch gezeigt, wie Sie bestätigen können, dass das von Ihnen erwartete Caching-Verhalten über den Netzwerkbereich in den Entwicklertools von Chrome angewendet wird.

Mit dem Beispielprojekt vertraut machen

Mit diesen Schlüsseldateien arbeiten Sie im Beispielprojekt:

  • server.js enthält den Node.js-Code, der den Code der Webanwendung Inhalte. Zur Verarbeitung von HTTP-Anfragen wird Express verwendet. und Antworten. Insbesondere wird express.static() verwendet, um alle die lokalen Dateien im öffentlichen Verzeichnis, sodass der serve-static Dokumentation als nützlich erweisen.
  • public/index.html ist der HTML-Code der Webanwendung. Wie die meisten HTML-Dateien müssen alle Versionsinformationen als Teil der URL enthalten.
  • public/app.15261a07.js und public/style.391484cf.css sind die JavaScript-Codes der Web-App und Preisvergleichsportal-Assets. Die URLs dieser Dateien enthalten jeweils einen Hash, zum Inhalt passen. index.html ist dafür verantwortlich, zu erfassen, welche versionierte URL geladen werden soll.

Caching-Header für den HTML-Code konfigurieren

Wenn Sie auf Anfragen nach URLs antworten, die keine Versionsinformationen enthalten, Fügen Sie Ihren Antwortnachrichten unbedingt Cache-Control: no-cache hinzu. Zusammen mit Es wird empfohlen, einen von zwei zusätzlichen Antwortheadern festzulegen: Last-Modified oder ETag. Die index.html fällt in diese Kategorie. Sie können dies in zwei Schritte unterteilen.

Zuerst werden die Header Last-Modified und ETag vom etag und lastModified Konfigurationsoptionen. Beide Optionen sind standardmäßig für alletrue HTTP-Antworten. In der aktuellen Konfiguration ist es also nicht erforderlich, diese Option zu aktivieren. verhalten. Sie können in Ihrer Konfiguration aber trotzdem explizit angeben.

Zweitens müssen Sie den Cache-Control: no-cache-Header hinzufügen können, nur für Ihre HTML-Dokumente (in diesem Fall index.html). Der einfachste Weg, Diesen Header bedingt festlegen, dass er ein benutzerdefiniertes setHeaders function, und darin prüfen, ob die eingehende Anfrage für ein HTML-Dokument bestimmt ist.

  • Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.

Die statische Bereitstellungskonfiguration in server.js beginnt so:

app.use(express.static('public'));
  • Nehmen Sie die oben beschriebenen Änderungen vor, um am Ende etwas zu erhalten, sieht so aus:
app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    }
  },
}));

Caching-Header für die versionierten URLs konfigurieren

Wenn Sie auf Anfragen zu URLs antworten, Fingerabdruck oder und deren Inhalte nie geändert werden sollen, Cache-Control: max-age=31536000 auf deine Antworten. Die app.15261a07.js und In diese Kategorie fallen style.391484cf.css.

Aufbauend auf der setHeaders function der im letzten Schritt verwendeten Methode, können Sie zusätzliche Logik hinzufügen, um zu prüfen, -Anforderung für eine URL mit Versionsangabe bezieht. Wenn ja, fügen Sie den Header Cache-Control: max-age=31536000 hinzu.

Am zuverlässigsten ist die Verwendung eines Regulärer Ausdruck um zu sehen, ob das angeforderte Asset mit einem bestimmten Muster übereinstimmt, wo die Hashwerte liegen. Bei diesem Beispielprojekt sind es immer acht Zeichen aus der Gruppe von Ziffern 0–9 und den Kleinbuchstaben a–f (d.h. Hexadezimal-Zeichen). Das Hash wird immer durch das Zeichen . auf beiden Seiten getrennt.

Ein regulärer Ausdruck, der entspricht den allgemeinen Regeln kann als new RegExp('\\.[0-9a-f]{8}\\.') ausgedrückt werden.

  • Ändern Sie die Funktion setHeaders so, dass sie so aussieht:
app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');

    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    } else if (hashRegExp.test(path)) {
      // If the RegExp matched, then we have a versioned URL.
      res.setHeader('Cache-Control', 'max-age=31536000');
    }
  },
}));

Neues Verhalten mit den Entwicklertools bestätigen

Mit den Änderungen am statischen Dateiserver können Sie überprüfen, Prüfen Sie, ob die richtigen Header festgelegt werden, indem Sie die Live-App bei geöffnetem Netzwerkbereich in den Entwicklertools in der Vorschau anzeigen.

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild Vollbild

  • Passen Sie die Spalten an, die im Steuerfeld "Netzwerk" angezeigt werden, sodass sie die relevantesten Informationen enthalten. Klicken Sie dazu mit der rechten Maustaste der Spaltenüberschrift:

Entwicklertools konfigurieren Netzwerkbereich.

Hier sind die Spalten Name, Status, Cache-Control, ETag und Last-Modified.

  • Öffnen Sie in den Entwicklertools den Bereich „Network“ (Netzwerk) und aktualisieren Sie die Seite.

Nachdem die Seite geladen wurde, sollten Sie im Netzwerkbereich Einträge sehen, die nach etwa so:

Spalten im Steuerfeld „Netzwerk“.

Die erste Zeile ist für das HTML-Dokument, zu dem Sie navigiert sind. Das ist richtig mit Cache-Control: no-cache ausgeliefert. Der HTTP-Antwortstatus für diese Anfrage ist ein 304. Dieses bedeutet, dass der Browser nicht sofort erkannt hat, dass er den im Cache gespeicherten HTML-Code verwendet, sondern nur hat mit Last-Modified und ETag eine HTTP-Anfrage an den Webserver gesendet. um zu sehen, ob der HTML-Code bereits aktualisiert wurde seinen Cache. Die HTTP 304-Antwort gibt an, dass kein HTML-Code vorhanden ist.

Die nächsten beiden Zeilen beziehen sich auf die JavaScript- und CSS-Assets mit Versionsangabe. Sie sollten mit Cache-Control: max-age=31536000 bereitgestellt werden, und der HTTP-Status für jeweils 200. Aufgrund der verwendeten Konfiguration wird keine eigentliche Anfrage an den Node.js-Server und klicken Sie auf den Eintrag, um weitere Informationen anzuzeigen, einschließlich, dass die Antwort „(vom Datenträger-Cache)“ kam.

Netzwerkantwortstatus von 200.

Die tatsächlichen Werte für die Spalten "ETag" und "Last-Modified" spielen keine große Rolle. Die müssen Sie überprüfen, ob sie festgelegt wurden.

Zusammenfassung

Nachdem Sie die Schritte in diesem Codelab durchgearbeitet haben, wissen Sie jetzt, wie Sie HTTP-Antwortheader mithilfe von Express auf einem Node.js-basierten Webserver konfigurieren, um den HTTP-Cache optimal zu nutzen. Sie sehen auch die Schritte, die Sie dass das erwartete Caching-Verhalten verwendet wird. den Chrome-Entwicklertools.