Problem med hurtiglager i nettlesere

Nettleseren hurtiglager tilkoblede CSS-stilark, JavaScript-skript og bilder. Hurtiglaging betyr at de tilkoblede filene bare lastes ned ved brukerens første besøk på nettstedet. Ved påfølgende besøk vil ikke disse filene blitt lastet ned igjen, men hentes fra nettleserens hurtiglager.

Hurtiglaging er nyttig. Den er laget for å øke hastigheten på lasting av nettstedet. Det er raskere for nettleseren å hente en fil fra sin egen lagring enn å laste den ned fra internett hver gang.

Imidlertid må man betale for hastigheten med ulemper under utvikling. Saken er at hvis du endrer noe i koden din og deretter legger ut endringene på hosting - vil alle brukere som allerede har besøkt nettstedet ditt ha en gammel hurtiglagret kopi av koden.

Første løsning på problemet

For å bekjempe denne oppførselen må man hver gang gi de endrede filene nye navn. I praksis er dette ikke praktisk, derfor brukes et lurt triks. Essensen er at når man kobler til en fil, setter man etter filnavnet et spørsmålstegn, likhetstegn og versjonsnummeret for skriptet ditt. En slik konstruksjon kalles en GET-parameter.

Tilstedeværelsen av en GET-parameter i filnavnet "ødelegger ikke" stien fra serverens synspunkt, den peker fortsatt på den samme filen. Men fra nettleserens synspunkt får en endring i GET-parameteren nettleseren til å oppfatte filstien som endret og laste ned filen på nytt.

For å bekjempe hurtiglager, når du gjør endringer i kodefilen din, må du øke verdien til GET-parameteren med én. Se eksempel på bruk av denne tilnærmingen:

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

Andre løsning på problemet

Det finnes også en mer avansert tilnærming. Den består i at filnavnene får tilfeldige strenger lagt til, for eksempel slik:

<!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 strengene kalles hash. En hash er en unik streng. Den beregnes fra innholdet i filen på en spesiell måte. Dette betyr at hver tekst tilsvarer sin egen unike hash. Hvis tekstinnholdet i filen ble endret, vil den også ha en annen hash og vi må endre den i filnavnet.

Selvfølgelig er det dårlig arbeid å beregne hasher manuelt og gi filer nytt navn. Derfor brukes denne tilnærmingen kun hvis vi har et verktøy som lar oss automatisk beregne hasher og gi filer nytt navn, samt endre filnavn til de nye i HTML-filer. Webpack lar oss gjøre alt dette. Dette er det vi skal lære gjennom hele opplæringen.