Problém s cache v prehliadačoch

Prehliadač ukladá do vyrovnávacej pamäte pripojené súbory štýlov CSS, skriptov JavaScript a obrázkov. Ukladanie do vyrovnávacej pamäte znamená, že pripojené súbory si prehliadač stiahne iba pri prvom vstupe používateľa na stránku. Pri následných vstupoch sa tieto súbory už nebudú sťahovať znova, ale vezmú sa z vyrovnávacej pamäte prehliadača.

Ukladanie do vyrovnávacej pamäte je užitočné. Bolo vytvorené na zvýšenie rýchlosti načítania stránky. Prehliadaču je totiž rýchlejšie vziať súbor zo svojho úložiska, než ho sťahovať zakaždým z internetu.

Avšak za rýchlosť sa platí nepohodlím pri vývoji. Vec sa má tak, že ak niečo zmeníte vo vašom kóde a potom zverejníte zmeny na hosting - všetci používatelia, ktorí už na vašu stránku vstúpili, budú mať starú kópiu kódu uloženú vo vyrovnávacej pamäti.

Prvé riešenie problému

Na boj s takýmto správaním je potrebné premenovať zmenené súbory. V praxi to nie je pohodlné, preto sa používa šikovný trik. Jeho podstata spočíva v tom, že pri pripájaní súboru za názov súboru umiestnime otáznik, znak rovnosti a číslo verzie vášho skriptu. Takáto konštrukcia sa nazýva GET parameter.

Prítomnosť GET parametra v názve súboru "nepokazí" cestu z pohľadu servera, stále ukazuje na ten istý súbor. Ale z pohľadu prehliadača zmena GET parametra núti prehliadač považovať cestu k súboru za zmenenú a stiahnuť súbor znova.

Na boj s vyrovnávacou pamäťou, keď vykonáte zmeny vo vašom súbore s kódom, budete musieť zvýšiť hodnotu GET parametra o jednotku. Pozrite si príklad použitia podobného prí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é riešenie problému

Existuje aj pokročilejší prístup. Spočíva v tom, že k názvom súborov sa pridávajú náhodné reťazce, naprí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>

Tieto reťazce sa nazývajú hash. Hash predstavuje jedinečný reťazec. Vypočítava sa z obsahu súboru špeciálnym spôsobom. To znamená, že každému textu zodpovedá jeho vlastný jedinečný hash. Ak bol text súboru zmenený, tak aj hash bude iný a my ho budeme musieť zmeniť v názve súboru.

Samozrejme, počítať hashe ručne a premenovávať súbory je nie veľmi zábavná činnosť. Preto sa tento prístup používa iba v prípade, že máme nejaký nástroj, ktorý umožňuje automaticky vypočítať hashe a premenovať súbory, ako aj zmeniť názvy súborov na nové v HTML súboroch. To všetko umožňuje robiť Webpack. Tomu sa budeme učiť počas celého tutoriálu.