Problem med browser cache

Browseren cacher tilknyttede CSS-stilark, JavaScript-scripts og billeder. Caching betyder, at de tilknyttede filer kun downloades af browseren ved brugerens første besøg på webstedet. Ved efterfølgende besøg vil disse filer ikke blive downloadet igen, men hentes fra browserens cache.

Caching er nyttigt. Det er skabt for at forøge hastigheden på webstedsindlæsningen. For det er hurtigere for browseren at tage en fil fra sin egen opbevaring end at downloade den hver gang fra internettet.

Dog betaler man for hastigheden med ulemper under udvikling. Kernen i problemet er, at hvis du ændrer noget i din kode og derefter udgiver ændringerne på hosting - vil alle brugere, som allerede har besøgt dit websted, have en gammel cachelagret kopi af koden.

Første løsning på problemet

For at bekæmpe denne adfærd er man nødt til hver gang at omdøbe de ændrede filer. I praksis er dette ikke praktisk, derfor anvendes et smart trick. Det går ud på, at når man tilknytter en fil, sætter man efter filnavnet et spørgsmålstegn, lighedstegn og versionsnummeret for dit script. En sådan konstruktion kaldes en GET-parameter.

Tilstedeværelsen af en GET-parameter i filnavnet "ødelægger ikke" stien fra serverens synspunkt, den peger stadig på den samme fil. Men fra browserens synspunkt tvinger en ændring af GET-parameteren browseren til at betragte filstien som ændret og downloade filen igen.

For at bekæmpe cachen, når du foretager ændringer i din kodefil, bliver du nødt til at forøge værdien af GET-parameteren med én. Se et eksempel på anvendelse af denne tilgang:

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

Anden løsning på problemet

Der findes også en mere avanceret tilgang. Den består i, at der til filnavnene tilføjes tilfældige strenge, for eksempel sådan her:

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

Disse strenge kaldes hashes. En hash er en unik streng. Den beregnes fra filens indhold på en speciel måde. Det betyder, at enhver tekst svarer til sin egen unikke hash. Hvis filens tekst er blevet ændret, vil dens hash også være en anden, og vi bliver nødt til at ændre den i filnavnet.

Selvfølgelig er det en dårlig beskæftigelse at beregne hashes manuelt og omdøbe filer. Derfor anvendes denne tilgang kun i det tilfælde, hvor vi har et værktøj, der tillader os at beregne hashes automatisk og omdøbe filer, samt ændre filnavnene til de nye i HTML-filerne. Webpack gør alt dette muligt. Dette vil vi lære gennem hele vejledningen.