Težava s predpomnilnikom v brskalnikih

Brskalnik predpomni povezane datoteke slogov CSS, skripte JavaScript in slike. Predpomnilnik pomeni, da brskalnik prenese povezane datoteke le ob prvem obisku uporabnika na spletnem mestu. Ob naslednjih obiskih te datoteke ne bodo znova prenesene, ampak bodo vzete iz predpomnilnika brskalnika.

Predpomnilnik je koristen. Ustvarjen je za izboljšanje hitrosti nalaganja spletnega mesta. Navsezadnje je brskalniku hitreje vzeti datoteko iz svojega shrambe, kot jo prenašati vsakič iz interneta.

Vendar pa moramo za hitrost plačati neudobje pri razvoju. Bistvo je v tem, da če kaj spremenite v vaši kodi in nato spremembe objavite na gostiteljstvo - vsi uporabniki, ki so že obiskali vaše spletno mesto, bodo imeli staro predpomnjjeno kopijo kode.

Prva rešitev težave

Za boj proti takšnemu vedenju je potrebno vsakič preimenovati spremenjene datoteke. V praksi to ni priročno, zato se uporablja pameten prijem. Njegovo bistvo je v tem, da pri povezovanju datoteke za imenom datoteke postavimo vprašaj, enačaj in številko različice vaše skripte. Takšna konstrukcija se imenuje GET parameter.

Prisotnost GET parametra v imenu datoteke "ne pokvari" poti z vidika strežnika, še vedno kaže na isto datoteko. Toda z vidika brskalnika sprememba GET parametra prisili brskalnik, da pot do datoteke šteje za spremenjeno in datoteko prenese znova.

Za boj proti predpomnilniku, ko vnesete spremembe v vašo datoteko s kodo, boste morali povečati vrednost GET parametra za ena. Oglejte si primer uporabe podobnega pristopa:

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

Druga rešitev težave

Obstaja tudi naprednejši pristop. Ta je sestavljen iz tega, da se k imenom datotek dodajo naključni nizi, na primer takole:

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

Ti nizi se imenujejo zgoščene vrednosti (hashes). Zgoščena vrednost predstavlja edinstven niz. Izračuna se iz vsebine datoteke na poseben način. To pomeni, da vsakemu besedilu ustreza njegova edinstvena zgoščena vrednost. Če je bilo besedilo datoteke spremenjeno, potem bo zgoščena vrednost drugačna in jo bomo morali spremeniti v imenu datoteke.

Seveda je ročno računanje zgoščenih vrednosti in preimenovanje datotek slab posel. Zato se ta pristop uporablja le, če imamo nekaj orodja, ki omogoča avtomatsko izračunavanje zgoščenih vrednosti in preimenovanje datotek, ter spreminjanje imen datotek na nova v HTML datotekah. Vse to omogoča Webpack. Temu se bomo učili skozi celotno vadnico.