Automatisk cache nulstilling i React build
Du bør allerede vide, at i browsere eksisterer der et problem med cache af statiske filer. Essensen af problemet er, at for at forbedre ydelsen cacher browseren filer til styles, scripts og billeder.
Det betyder, at hvis du ændrer noget i dine scripts eller styles på hostingen, vil ændringerne kun vises for nye besøgende på webstedet. Tidligere besøgende, der allerede har været på webstedet, vil se den cachelagrede version af koden. Dette er selvfølgelig uacceptabelt.
Heldigvis løses dette problem automatisk i React. Løsningen består i, at build-filerne, udover navn og filtype, har en tilfældig streng, som kaldes hash. Denne hash svarer til indholdet af filen. Det betyder, at når koden i filen ændres, vil hashen i dens navn også ændre sig. På denne måde vil browseren tro, at det er en ny fil og downloade den.
Vi kan observere filhashes
ved deres tilkobling i index.html:
<script defer="defer" src="/static/js/main.3dd63bcb.js"></script>
<link href="/static/css/main.f855e6bc.css" rel="stylesheet">
Udfør bygningen af projektet. Studer, hvilke hashes der står på filerne i bygningen.
Uden at ændre koden i dit projekt, udfør bygningen. Vær sikker på, at filhashesne ikke ændrer sig.
Ændr koden i dit projekt. Udfør bygningen. Vær sikker på, at filhashesne ændrer sig.
