Konfigurowanie zachowania buforowania HTTP

Jeff Posnick

To ćwiczenie w Codelabs pokazuje, jak zmienić nagłówki buforowania HTTP zwracane przez Serwer WWW oparty na Node.js, z obsługą obsługi Express platformy. Pokażemy też, jak potwierdzić, że buforowanie działa zgodnie z oczekiwaniami. jest faktycznie stosowany. Aby to zrobić, użyj panelu Network (Sieć) w Narzędziach deweloperskich w Chrome.

Zapoznaj się z przykładowym projektem

Oto najważniejsze pliki, z którymi będziesz pracować w przykładowym projekcie:

  • server.js zawiera kod Node.js, który obsługuje treści. Do obsługi żądań HTTP używa Express. i udzielania odpowiedzi. W szczególności tag express.static() służy do wyświetlania wszystkich plików lokalnych w katalogu publicznym, przez co operator serve-static dokumentacja może Ci się przydać.
  • public/index.html to kod HTML aplikacji internetowej. Podobnie jak w przypadku większości plików HTML, zawierać w swoim adresie URL jakiekolwiek informacje o wersji.
  • public/app.15261a07.js i public/style.391484cf.css to JavaScript aplikacji internetowej i komponentów CSS. Każdy z tych plików ma w adresach URL pewną hasz, odpowiadający ich treściom. index.html odpowiada za zachowanie konkretnego adresu URL z obsługą wersji, który ma zostać wczytany.

Skonfiguruj nagłówki buforowania dla naszego kodu HTML

W odpowiedzi na żądania dotyczące adresów URL, które nie zawierają informacji o wersji, upewnij się, dodaj atrybut Cache-Control: no-cache do odpowiedzi. Razem z że zalecamy ustawienie jednego z dwóch dodatkowych nagłówków odpowiedzi: Last-Modified lub ETag. Do tej kategorii należy index.html. Możesz to podzielić na 2 kroki.

Po pierwsze nagłówki Last-Modified i ETag są kontrolowane przez etag. oraz lastModified opcje konfiguracji. Obie te opcje domyślnie mają ustawienie true dla wszystkich odpowiedzi HTTP, więc przy obecnej konfiguracji nie musisz wyrazić zgody na ich otrzymywanie zachowanie użytkownika. Możesz jednak to zrobić w sposób wyraźny w swojej konfiguracji.

Po drugie, musisz być w stanie dodać nagłówek Cache-Control: no-cache, ale tylko dla dokumentów HTML (w tym przypadku index.html). Najprostszy sposób warunkowo ustawić ten nagłówek, to napisanie niestandardowego setHeaders function W tym celu sprawdź, czy przychodzące żądanie dotyczy dokumentu HTML.

  • Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.

Statyczna konfiguracja wyświetlania w server.js zaczyna się tak:

app.use(express.static('public'));
  • Po dokonaniu opisanych powyżej zmian powinno powstać coś, wygląda jak:
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');
    }
  },
}));

Skonfiguruj nagłówki buforowania dla adresów URL z wersjami

W odpowiedzi na żądania dotyczące adresów URL zawierających „odcisk palca” lub informacji o obsłudze wersji, których treść nigdy nie powinna być zmieniana, Cache-Control: max-age=31536000 na Twoje odpowiedzi. app.15261a07.js i Do tej kategorii należą style.391484cf.css.

Podstawy setHeaders function użyte w ostatnim kroku, możesz dodać funkcje logiczne, aby sprawdzić, czy dotyczy wersji adresu URL, a jeśli tak, dodaj nagłówek Cache-Control: max-age=31536000.

Najlepszym sposobem w tym celu jest użycie wyrażenie regularne czy zasób, o który prosisz, pasuje do wzorca w których wchodzą hasze. W tym przykładowym projekcie zawsze jest to osiem z zestawu cyfr 0–9 i małych liter a–f (tzn. szesnastkowych). Hasz jest zawsze rozdzielony znakiem . po obu stronach.

Wyrażenie regularne, które jest zgodne z tymi ogólnymi regułami może być wyrażona jako new RegExp('\\.[0-9a-f]{8}\\.').

  • Zmodyfikuj funkcję setHeaders, aby wyglądała tak:
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');
    }
  },
}));

Potwierdzanie nowego zachowania za pomocą Narzędzi deweloperskich

Po wprowadzeniu zmian statycznego serwera plików możesz sprawdzić, czy sprawdź, czy ustawione są odpowiednie nagłówki, wyświetlając podgląd aktywnej aplikacji z otwartym panelem Network (Sieć) w Narzędziach deweloperskich.

  • Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran pełny ekran

  • Dostosuj kolumny, które mają być zostaną wyświetlone w panelu Sieć i zawierają najistotniejsze informacje. Wystarczy, że klikniesz prawym przyciskiem nagłówek kolumny:

Konfigurowanie Narzędzi deweloperskich Panel sieci.

Zwróć uwagę na te kolumny: Name, Status, Cache-Control, ETag i Last-Modified.

  • Otwórz panel Network (Sieć) w Narzędziach deweloperskich i odśwież stronę.

Po załadowaniu strony w panelu Network (Sieć) powinny być widoczne wpisy wyglądające np.:

Kolumny panelu Sieć.

Pierwszy wiersz dotyczy otwartego dokumentu HTML. Tak jest prawidłowo obsługiwane za pomocą usługi Cache-Control: no-cache. stan odpowiedzi HTTP danego żądania, to 304. Ten oznacza, że przeglądarka nie powinna od razu używać kodu HTML zapisanego w pamięci podręcznej, ale zamiast wysłał(a) żądanie HTTP do serwera WWW przy użyciu interfejsów Last-Modified i ETag informacje o tym, czy jego kod HTML został już zaktualizowany. jej pamięci podręcznej. Odpowiedź HTTP 304 oznacza, że kod HTML nie został zaktualizowany.

Następne 2 wiersze dotyczą wersjonowanych zasobów JavaScript i CSS. Zalecenia zostaną wyświetlone z parametrem Cache-Control: max-age=31536000, a stan HTTP witryny każdy z nich to 200. Ze względu na zastosowaną konfigurację nie jest wysyłane żadne żądanie do na serwerze Node.js. Po kliknięciu wpisu zobaczysz dodatkowe informacje. w tym informację o tym, że odpowiedź pochodzi „(z pamięci podręcznej dysku)”.

Stan odpowiedzi sieci o wartości 200.

Rzeczywiste wartości w kolumnach ETag i Ostatnia modyfikacja nie mają większego znaczenia. ważne jest potwierdzenie, że zostały skonfigurowane.

Podsumowywanie rzeczy

Po wykonaniu wszystkich kroków z tego ćwiczenia z programowania wiesz już, jak skonfigurować nagłówki odpowiedzi HTTP na serwerze WWW opartym na Node.js przy użyciu Express, w celu optymalnego wykorzystania pamięci podręcznej HTTP. Musisz też wykonać kilka czynności, aby potwierdzić w panelu Network (Sieć) w Narzędzia deweloperskie w Chrome.