A böngészők gyorsítótár problémája

A böngésző gyorsítótárazza a csatolt CSS stílusfájlokat, JavaScript szkripteket és képeket. A gyorsítótárazás azt jelenti, hogy a csatolt fájlokat a böngésző csak akkor tölti le, amikor a felhasználó először lép be a weboldalra. A későbbi belépéseknél ezeket a fájlokat már nem tölti le újra, hanem a böngésző gyorsítótárából veszi.

A gyorsítótárazás hasznos. Azért jött létre, hogy felgyorsítsa a weboldal betöltését. Hiszen a böngészőnek gyorsabb a fájlt a saját tárhelyéről venni, minthogy minden alkalommal letöltse az internetről.

Azonban a sebességért árat kell fizetnünk a fejlesztés során fellépő kényelmetlenség formájában. Az a helyzet, hogy ha megváltoztat valamit a kódjában, majd feltölti a változtatásokat a hosztolóra - minden olyan felhasználó, aki már járt a weboldalán, a régi gyorsítótárazott kópmányt fogja látni.

A probléma első megoldása

Az ilyen viselkedés kijavításához minden alkalommal át kell nevezni a módosított fájlokat. A gyakorlatban ez nem kényelmes, ezért egy trükkös megoldást alkalmaznak. Ennek a lényege, hogy a fájl csatolásakor a fájlnév után kérdőjelet, egyenlőségjelet és a szkript verziószámát írjuk. Ezt a konstrukciót GET paraméternek hívják.

A GET paraméter jelenléte a fájlnévben "nem rontja el" a elérési utat a szerver szempontjából, továbbra is ugyanarra a fájlra mutat. De a böngésző szempontjából a GET paraméter megváltoztatása arra kényszeríti a böngészőt, hogy a fájl elérési útját megváltozottnak vegye és újra letöltse a fájlt.

A gyorsítótár elleni küzdelem érdekében, amikor módosításokat visz be a kódfájljába, növelnie kell a GET paraméter értékét eggyel. Nézze meg a megoldás példáját:

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

A probléma második megoldása

Létezik egy fejlettebb megközelítés is. Ennek lényege, hogy a fájlnevekhez véletlenszerű karakterláncokat adnak, például így:

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

Ezeket a karakterláncokat hash-nek (kivonatnak) hívják. A hash egy egyedi karakterlánc. Ezt a fájl tartalmából számítják ki különleges módon. Ez azt jelenti, hogy minden szöveghez tartozik egy saját egyedi hash. Ha a fájl szövege megváltozott, akkor a hash-e is más lesz és meg kell változtatnunk a fájlnevében.

Természetesen, kézzel kiszámolni a hash-eket és átnevezni a fájlokat nem túl jó feladat. Ezért ezt a megközelítést csak akkor használják, ha van olyan eszköz, amely lehetővé teszi a hash-ek automatikus kiszámítását és a fájlok átnevezését, valamint a fájlnevek újraírását a HTML fájlokban. Mindezt meg tudja csinálni a Webpack. Erre fogunk tanulni az egész útmutató során.