Automatisch cache legen in React build
Je moet al weten dat in browsers een probleem met de cache van statische bestanden bestaat. De kern van het probleem is dat voor betere prestaties de browser bestanden zoals stijlbladen, scripts en afbeeldingen cached.
Dit betekent dat als je op de hosting iets verandert in je scripts of stijlen, de wijzigingen alleen zichtbaar zijn voor nieuwe bezoekers van de site. Oude bezoekers, die de site eerder al hebben bezocht, zullen de gecachede versie van de code zien. Dit is uiteraard onaanvaardbaar.
Gelukkig wordt dit probleem in React automatisch opgelost. De oplossing bestaat eruit dat de buildbestanden, naast de naam en extensie, een willekeurige tekenreeks hebben, die hash wordt genoemd. Deze hash komt overeen met de inhoud van het bestand. Dit betekent dat wanneer de code in het bestand wordt gewijzigd, de hash in de bestandsnaam ook verandert. Hierdoor denkt de browser dat het een nieuw bestand is en zal het deze downloaden.
We kunnen de hashes van bestanden zien
bij het insluiten ervan in index.html:
<script defer="defer" src="/static/js/main.3dd63bcb.js"></script>
<link href="/static/css/main.f855e6bc.css" rel="stylesheet">
Voer een build van het project uit. Bestudeer welke hashes de bestanden in de build hebben.
Voer, zonder de code van je project te wijzigen, een build uit. Controleer of de hashes van de bestanden niet veranderen.
Wijzig de code van je project. Voer een build uit. Controleer of de hashes van de bestanden veranderen.
