Automaattinen välimuistin tyhjentäminen Reactin buildissa
Sinun tulisi jo tietää, että selaimissa on staattisten tiedostojen välimuistin ongelma. Ongelman ydin on, että suorituskyvyn parantamiseksi selain tallentaa välimuistiin tyylitiedostot, skriptit ja kuvat.
Tämä tarkoittaa, että jos vaihdat jotain skripteissäsi tai tyyleissäsi isännöintipalvelussa, muutokset näkyvät vain sivuston uusille kävijöille. Vanhat kävijät, jotka olivat jo aiemmin sivustolla, näkevät välimuistiin tallennetun koodiversion. Tämä ei tietenkään ole hyväksyttävää.
Onneksi Reactissa tämä ongelma ratkaistaan automaattisesti. Ratkaisu perustuu siihen, että build-tiedostoilla, nimen ja tunnisteensa lisäksi, on satunnainen merkkijono, jota kutsutaan hashiksi. Tämä hash vastaa tiedoston sisältöä. Tämä tarkoittaa, että kun tiedoston koodia muutetaan, sen nimessä oleva hash muuttuu. Näin ollen selain luulee, että kyseessä on uusi tiedosto ja lataa sen itselleen.
Voimme nähdä tiedostojen hashit
kun ne liitetään index.html-tiedostoon:
<script defer="defer" src="/static/js/main.3dd63bcb.js"></script>
<link href="/static/css/main.f855e6bc.css" rel="stylesheet">
Suorita projektin build. Tutki, minkä hashit tiedostoilla buildissa on.
Muuttamatta projektisi koodia suorita build. Varmista, että tiedostojen hashit eivät muutu.
Muuta projektisi koodia. Suorita build. Varmista, että tiedostojen hashit muuttuvat.
