HTTP-Caching-Verhalten konfigurieren

Jeff Posnick

Öffne diesen Glitch in einem zweiten Tab, um dem Codelab zu folgen.

Hinweis : In diesem Codelab werden die Chrome-Entwicklertools verwendet. Laden Sie Chrome herunter, falls Sie dies noch nicht getan haben.

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.

Hinweis : Die spezifische Anleitung ist zwar auf Express ausgerichtet, die allgemeinen Prinzipien zur Auswahl der richtigen Caching-Header gelten aber auch für jede Webserverumgebung.

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, die zum Inhalt passen. index.html ist dafür verantwortlich, zu erfassen, welche versionierte URL geladen werden soll.

Hinweis : In der echten Welt wird das Zuweisen von Hashes und das Aktualisieren von HTML-Dateien mit Verweisen auf die neueste versionierte URL von einem Build-Tool wie Webpack durchgeführt. In diesem Codelab gehen wir davon aus, dass die Hashes im Rahmen eines Build-Prozesses generiert wurden, der bereits stattgefunden hat.

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 notwendig, diese Funktion zu aktivieren. verhalten. Sie können in Ihrer Konfiguration aber trotzdem explizit etwas 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.

Hinweis : Es ist hilfreich, die Regeln so genau wie möglich zu formulieren, um zukünftige Probleme zu vermeiden. Eine allgemeinere Übereinstimmung, z. B. die Prüfung auf die Dateiendung .js oder .css, kann im weiteren Verlauf zu Problemen führen, wenn du deinem Projekt zusätzliche, nicht versionierte JavaScript- oder CSS-Assets hinzufügst.

• Ä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

Hinweis : In diesem Codelab können Sie sich mit dem Bereich „Netzwerk“ in den Chrome-Entwicklertools vertraut machen.

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

• 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:

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 wie zum Beispiel so:

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.

Hinweis : Cache-Control: no-cache bedeutet nicht, dass die im Cache gespeicherte Kopie nie verwendet wurde. Das bedeutet: „Zuerst immer beim Server prüfen und bei einer HTTP 304-Antwort die im Cache gespeicherte Kopie verwenden“.

Die nächsten beiden Zeilen beziehen sich auf die JavaScript- und CSS-Assets mit Versionsangabe. Sie sollten werden mit Cache-Control: max-age=31536000 bereitgestellt. 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.

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.