Het probleem met cache in browsers

De browser cachet gekoppelde CSS-stijlbestanden, JavaScript-scripts en afbeeldingen. Caching betekent dat de gekoppelde bestanden alleen door de browser worden gedownload bij het eerste bezoek van de gebruiker aan de site. Bij volgende bezoeken worden deze bestanden niet opnieuw gedownload, maar worden ze uit de cache van de browser gehaald.

Caching is nuttig. Het is gemaakt om de laadsnelheid van de site te verhogen. Het is immers sneller voor de browser om een bestand uit zijn eigen opslag te halen, dan het elke keer opnieuw van internet te downloaden.

Echter, voor snelheid moet je betalen met ongemak tijdens ontwikkeling. Het zit zo, dat als je iets verandert in je code en vervolgens de wijzigingen uploadt naar de hosting - alle gebruikers die al op je site zijn geweest, zullen een oude gecachete kopie van de code hebben.

Eerste oplossing voor het probleem

Om dit gedrag te bestrijden, moet je elke keer de gewijzigde bestanden hernoemen. In de praktijk is dit niet handig, daarom wordt een slimme truc gebruikt. De essentie ervan is dat bij het koppelen van een bestand, achter de bestandsnaam een vraagteken, een gelijkteken en het versienummer van je script wordt gezet. Zo'n constructie wordt een GET-parameter genoemd.

De aanwezigheid van een GET-parameter in de bestandsnaam "verpest" de pad niet vanuit het oogpunt van de server, het verwijst nog steeds naar hetzelfde bestand. Maar vanuit het oogpunt van de browser zorgt het wijzigen van de GET-parameter ervoor dat de browser het pad naar het bestand als gewijzigd beschouwt en het bestand opnieuw downloadt.

Om de cache te bestrijden, wanneer je wijzigingen aanbrengt in je codebestand, moet je de waarde van de GET-parameter met één verhogen. Bekijk het voorbeeld van de toepassing van deze aanpak:

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

Tweede oplossing voor het probleem

Er bestaat ook een meer geavanceerde aanpak. Deze bestaat eruit dat aan de bestandsnamen willekeurige tekenreeksen worden toegevoegd, bijvoorbeeld zo:

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

Deze tekenreeksen worden hashes genoemd. Een hash is een unieke tekenreeks. Hij wordt op een speciale manier berekend uit de inhoud van het bestand. Dit betekent dat elke tekst overeenkomt met zijn eigen unieke hash. Als de tekst van het bestand is gewijzigd, dan zal de hash anders zijn en moeten we deze wijzigen in de bestandsnaam.

Het is natuurlijk geen leuke bezigheid om handmatig hashes te berekenen en bestanden te hernoemen. Daarom wordt deze aanpak alleen gebruikt als we een tool hebben die automatisch hashes kan berekenen en bestanden kan hernoemen, en ook de bestandsnamen kan wijzigen naar nieuwe in HTML-bestanden. Webpack kan dit allemaal. Dit zullen we leren gedurende de hele tutorial.