Problem sa kešom u pretraživačima

Pretraživač kešira povezane CSS stilove, JavaScript skripte i slike. Keširanje znači da povezane fajlove pretraživač preuzima samo prilikom prvog poseta korisnika sajtu. Pri narednim posetama ovi fajlovi neće ponovo biti preuzimani, već će se uzeti iz keša pretraživača.

Keširanje je korisno. Kreirano je za povećanje brzine učitavanja sajta. Naime, pretraživaču je brže da uzme fajl iz svog skladišta, nego da ga svaki put preuzima iz interneta.

Međutim, za brzinu se plaća neudobnošću pri razvoju. Stvar je u tome da ako promenite nešto u vašem kodu i onda postavite promene na hosting - svi korisnici koji su već posećivali vaš sajt će imati staru keširanu kopiju koda.

Prvo rešenje problema

Za borbu protiv ovakvog ponašanja potrebno je svaki put preimenovati izmenjene fajlove. U praksi to nije zgodno, pa se koristi pametan trik. Njegova suština leži u tome, da prilikom povezivanja fajla posle imena fajla stavimo znak pitanja, znak jednakosti i broj verzije vaše skripte. Takva konstrukcija se naziva GET parametrom.

Prisustvo GET parametra u imenu fajla "ne kvari" putanju sa aspekta servera, i dalje ukazujući na isti fajl. Ali sa aspekta pretraživača, promena GET parametra tera pretraživač da smatra da se putanja do fajla promenila i da ponovo preuzme fajl.

Za borbu protiv keša, kada unesete promene u vaš fajl sa kodom, trebaće vam da povećate vrednost GET parametra za jedan. Pogledajte primer primene ovakvog pristupa:

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

Drugo rešenje problema

Postoji i napredniji pristup. On se sastoji u tome da se imenima fajlova dodaju nasumični nizovi karaktera, na primer, ovako:

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

Ovi nizovi se nazivaju heševima. Heš predstavlja jedinstveni niz karaktera. On se izračunava iz sadržaja fajla na poseban način. To znači da svakom tekstu odgovara njegov jedinstveni heš. Ako je tekst fajla izmenjen, onda će i heš kod njega biti drugačiji i trebaće nam da ga promenimo u imenu fajla.

Naravno, računati heševe i preimenovati fajlove ručno je loša zabava. Zato se ovaj pristup koristi samo u slučaju da imamo neki alat koji omogućava automatsko računanje heševa i preimenovanje fajlova, kao i menjanje imena fajlova na nova u HTML fajlovima. Sve to omogućava Webpack. Ovome ćemo učiti tokom čitavog udžbenika.