Probleem brauseri vahemäluga

Brauser salvestab vahemällu ühendatud CSS-i stiilifailid, JavaScripti skriptid ja pildid. Vahemällu salvestamine tähendab, et ühendatud failid brauser laeb alla ainult kasutaja esimesel külastusel saidile. Järgnevatel külastustel neid faile ei laeta uuesti alla, vaid võetakse brauseri vahemälust.

Vahemällu salvestamine on kasulik. See on loodud saidikiiruse suurendamiseks. Lõppude lõpuks on brauseril kiirem võtta fail oma enda salvestusruumist, kui laadida see iga kord uuesti internetist alla.

Siiski tuleb kiiruse eest maksta arendamise ebamugavustega. Asi on selles, et kui te muudate midagi oma koodis ja seejärel laadite muudatused veebiserdisse üles - siis kõik kasutajad, kes on teie saidile juba külastanud, saavad endale vana vahemällu salvestatud koodikoopia.

Esimene probleemi lahendus

Sellise käitumise vastu võitlemiseks tuleb iga kord muudetud faile ümber nimetada. Praktikas pole see mugav, seetõttu kasutatakse kavalat võtet. Selle olemus seisneb selles, et faili ühendamisel pannakse failinime järele küsimärk, võrdusmärk ja teie skripti versiooninumber. Sellist konstruktsiooni nimetatakse GET-parameetriks.

GET-parameetri olemasolu failinimes "ei riku" teed serveri seisukohalt, osutades endiselt samale failile. Kuid brauseri seisukohalt GET-parameetri muutmine sunnib brauserit pidama failiteed muutunuks ja laeb faili uuesti alla.

Vahemälu vastu võitlemiseks, kui teete muudatusi oma koodifailis, peate suurendama GET-parameetri väärtust ühe võrra. Vaadake sarnase lähenemise rakendamise näidet:

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

Teine probleemi lahendus

Eksisteerib ka täiustatum lähenemine. See seisneb selles, et failinimedele lisatakse juhuslikud stringid, näiteks nii:

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

Neid stringe nimetatakse räsiväärtusteks (hash). Räsiväärtus esindab unikaalset stringi. See arvutatakse faili sisu põhjal spetsiaalsel viisil. See tähendab, et iga tekst vastab oma unikaalsele räsiväärtusele. Kui faili teksti on muudetud, siis on ka selle räsiväärtus teine ja me peame selle muutma failinimes.

Loomulikult on räsiväärtuste käsitsi arvutamine ja failide ümbernimetamine ebasobiv tegevus. Seetõttu kasutatakse seda lähenemist ainult juhul, kui meil on mõni tööriist, mis võimaldab automaatselt räsiväärtusi arvutada ja faile ümber nimetada, samuti failinimesid uutele muuta HTML-failides. Kõike seda võimaldab teha Webpack. Selle õppime me kogu õpiku jooksul.