Problém s mezipamětí v prohlížečích

Prohlížeč ukládá do mezipaměti připojené soubory stylů CSS, skripty JavaScript a obrázky. Ukládání do mezipaměti znamená, že připojené soubory prohlížeč stáhne pouze při první návštěvě uživatele na webu. Při následných návštěvách tyto soubory již nebudou znovu stahovány, ale budou vzaty z mezipaměti prohlížeče.

Ukládání do mezipaměti je užitečné. Bylo vytvořeno pro zvýšení rychlosti načítání webu. Pro prohlížeč je totiž rychlejší vzít soubor ze svého úložiště, než jej stahovat pokaždé z internetu.

Avšak za rychlost se platí nepohodlím při vývoji. Jde o to, že pokud změníte něco ve vašem kódu a poté nahrajete změny na hosting - všichni uživatelé, kteří již na váš web zavítali, budou mít starou verzi kódu uloženou v mezipaměti.

První řešení problému

Pro boj s tímto chováním je potřeba pokaždé přejmenovat změněné soubory. V praxi to není pohodlné, proto se používá chytrý trik. Jeho podstata spočívá v tom, že při připojování souboru za jménem souboru napíšeme otazník, rovnítko a číslo verze vašeho skriptu. Taková konstrukce se nazývá GET parametr.

Přítomnost GET parametru v názvu souboru "nepoškozuje" cestu z pohledu serveru, stále odkazuje na stejný soubor. Ale z pohledu prohlížeče změna GET parametru nutí prohlížeč považovat cestu k souboru za změněnou a stáhnout soubor znovu.

Pro boj s mezipamětí, když provedete změny ve vašem souboru s kódem, budete muset zvýšit hodnotu GET parametru o jedničku. Podívejte se na příklad použití podobného přístupu:

<!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>

Druhé řešení problému

Existuje i pokročilejší přístup. Spočívá v tom, že k názvům souborů se přidávají náhodné řetězce, například takto:

<!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>

Tyto řetězce se nazývají heše. Heš představuje jedinečný řetězec. Vypočítává se z obsahu souboru zvláštním způsobem. To znamená, že každému textu odpovídá jeho vlastní jedinečný heš. Pokud byl text souboru změněn, tak i heš u něj bude jiný a my jej budeme muset změnit v názvu souboru.

Samozřejmě, ručně vypočítávat heše a přejmenovávat soubory je tak trochu otrava. Proto se tento přístup používá pouze v případě, že máme nějaký nástroj, který umožňuje automaticky vypočítávat heše a přejmenovávat soubory, a také měnit názvy souborů na nové v HTML souborech. To vše umožňuje Webpack. Tomu se budeme učit během celé této příručky.