Problem med webbläsarcache

Webbläsaren cachar anslutna CSS-stilmallar, JavaScript-skript och bilder. Cachelagring innebär att de anslutna filerna endast laddas ner av webbläsaren när användaren först besöker webbplatsen. Vid efterföljande besök kommer dessa filer inte att laddas ner igen, utan hämtas från webbläsarens cache.

Cachelagring är användbart. Det är skapat för att öka webbplatsens laddningshastighet. Det är nämligen snabbare för webbläsaren att ta en fil från sitt eget lagringsutrymme än att ladda ner den varje gång från internet.

Men för hastigheten får man betala med obekvämligheter under utvecklingen. Saken är den att om du ändrar något i din kod och sedan publicerar ändringarna på webbhotellet - kommer alla användare som redan har besökt din webbplats att ha en gammal cachelagrad kopia av koden.

Den första lösningen på problemet

För att bekämpa detta beteende måste man varje gång byta namn på de ändrade filerna. I praktiken är detta inte bekvämt, därför används ett smart knep. Kärnan i det är att när en fil ansluts sätter vi efter filnamnet ett frågetecken, likamed-tecken och ett versionsnummer för ditt skript. En sådan konstruktion kallas för en GET-parameter.

Närvaron av en GET-parameter i filnamnet "förstör inte" sökvägen från serverns synvinkel, den pekar fortfarande på samma fil. Men från webbläsarens synvinkel får en ändring av GET-parametern webbläsaren att uppfatta sökvägen till filen som förändrad och ladda ner filen på nytt.

För att bekämpa cachen, när du gör ändringar i din kodfil, måste du öka värdet på GET-parametern med ett. Se ett exempel på tillämpning av ett liknande tillvägagångssätt:

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

Den andra lösningen på problemet

Det finns också ett mer avancerat tillvägagångssätt. Det går ut på att filnamnen får slumpmässiga strängar tillagda, till exempel så här:

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

Dessa strängar kallas hashar. En hash är en unik sträng. Den beräknas från filens innehåll på ett specifikt sätt. Det betyder att varje text har sin egen unika hash. Om texten i filen ändrades, kommer den att få en annan hash och vi måste ändra den i filnamnet.

Naturligtvis är det ingen rolig syssla att beräkna hashvar manuellt och byta namn på filer. Därför används detta tillvägagångssätt bara om vi har något verktyg som tillåter oss att automatiskt beräkna hashvar och byta namn på filer, samt ändra filnamn till de nya i HTML-filer. Webpack gör allt detta möjligt. Detta kommer vi att lära oss under hela handledningen.