Problem z pamięcią podręczną w przeglądarkach

Przeglądarka przechowuje w pamięci podręcznej podłączone pliki arkuszy stylów CSS, skryptów JavaScript i obrazów. Przechowywanie w pamięci podręcznej oznacza, że podłączone pliki przeglądarka pobiera tylko podczas pierwszego wejścia użytkownika na stronę. Przy kolejnych wejściach te pliki nie będą już pobierane ponownie, a zostaną wzięte z pamięci podręcznej przeglądarki.

Przechowywanie w pamięci podręcznej jest przydatne. Zostało stworzone w celu zwiększenia prędkości ładowania strony. W końcu przeglądarce szybciej jest wziąć plik z własnej pamięci, niż pobierać go za każdym razem z internetu.

Jednak za prędkość trzeba płacić niewygodą podczas programowania. Chodzi o to, że jeśli zmienisz coś w swoim kodzie, a następnie opublikujesz zmiany na hostingu - wszyscy użytkownicy, którzy już weszli na twoją stronę, będą mieli starą zapisaną w pamięci podręcznej kopię kodu.

Pierwsze rozwiązanie problemu

Aby walczyć z takim zachowaniem, trzeba za każdym razem zmieniać nazwę zmienionych plików. W praktyce jest to niewygodne, dlatego stosuje się sprytny trik. Jego istota polega na tym, że przy podłączaniu pliku po nazwie pliku stawiamy znak zapytania, znak równości i numer wersji twojego skryptu. Taka konstrukcja nazywa się parametrem GET.

Obecność parametru GET w nazwie pliku "nie psuje" ścieżki z punktu widzenia serwera, nadal wskazując na ten sam plik. Ale z punktu widzenia przeglądarki zmiana parametru GET zmusza przeglądarkę do uznania ścieżki do pliku za zmienioną i pobrania pliku na nowo.

Aby walczyć z pamięcią podręczną, kiedy wprowadzasz zmiany w twoim pliku z kodem, będziesz musiał zwiększyć wartość parametru GET o jeden. Spójrz na przykład zastosowania podobnego podejścia:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="styles.css?v=1">
		<script src="script.js?v=1"></script>
	</head>
	<body>
		
	</body>
</html>

Drugie rozwiązanie problemu

Istnieje również bardziej zaawansowane podejście. Polega ono na tym, że do nazw plików dodawane są losowe ciągi znaków, na przykład w ten sposób:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="styles.398db7afe3b52e94bb25.css">
		<script src="script.1d12c304c284a752cb9a.js"></script>
	</head>
	<body>
		
	</body>
</html>

Te ciągi znaków nazywane są skrótami (hash). Skrót reprezentuje unikalny ciąg znaków. Jest obliczany z zawartości pliku w specjalny sposób. Oznacza to, że każdemu tekstowi odpowiada jego unikalny skrót. Jeśli tekst pliku został zmieniony, to i skrót będzie inny i będziemy musieli zmienić go w nazwie pliku.

Oczywiście, ręczne obliczanie skrótów i zmienianie nazw plików to kiepskie zajęcie. Dlatego to podejście jest używane tylko wtedy, gdy mamy narzędzie, które pozwala automatycznie obliczać skróty i zmieniać nazwy plików, a także zmieniać nazwy plików na nowe w plikach HTML. Wszystko to umożliwia Webpack. Będziemy się tego uczyć przez cały czas trwania podręcznika.