Selaimen välimuistiin liittyvä ongelma

Selain tallentaa välimuistiin liitetyt CSS-tyylitiedostot, JavaScript-skriptit ja kuvat. Välimuistittaminen tarkoittaa, että liitetyt tiedostot selain lataa vain käyttäjän ensimmäisellä käynnillä sivustolle. Seuraavilla käynneillä näitä tiedostoja ei ladata uudelleen, vaan ne otetaan selaimen välimuistista.

Välimuistittaminen on hyödyllistä. Se on luotu sivuston latausnopeuden parantamiseksi. Onhan selaimelle nopeampaa ottaa tiedosto omasta tallennustilastaan kuin ladata se aina uudelleen internetistä.

Kuitenkin nopeudesta joudutaan maksamaan haittoja kehityksen aikana. Asia on niin, että jos muutat jotain koodissasi ja julkaiset muutokset isännöintipalvelimelle - kaikki käyttäjät, jotka ovat jo käyneet sivustollasi, saavat vanhan välimuistiin tallennetun koodin kopion.

Ongelman ensimmäinen ratkaisu

Tällaisen käyttäytymisen torjumiseksi tarvitaan jokainen kerta nimetä muutetut tiedostot uudelleen. Käytännössä tämä ei ole kätevää, joten käytetään ovelaa temppua. Sen ydin on, että tiedostoa liitettäessä nimen jälkeen asetaa kysymysmerkin, yhtäsuuruusmerkin ja versionumeron skriptistään. Tällaista rakennetta kutsutaan GET-parametriksi.

GET-parametrin läsnäolo tiedoston nimessä "ei pilaa" polkua palvelimen näkökulmasta, vaan se edelleen osoittaa samaan tiedostoon. Mutta selaimen näkökulmasta GET-parametrin muutos pakottaa selaimen näkemään tiedoston polun muuttuneena ja lataamaan tiedoston uudelleen.

Välimuistia vastaan taistellessa, kun teet muutoksia kooditiedostoosi, sinun on kasvatettava GET-parametrin arvoa yhdellä. Katso esimerkki vastaavan lähestymistavan soveltamisesta:

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

Ongelman toinen ratkaisu

On olemassa myös kehittyneempi lähestymistapa. Se perustuu siihen, että tiedostojen nimiin lisätään satunnaisia merkkijonoja, esimerkiksi näin:

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

Näitä merkkijonoja kutsutaan tarkistusummareiksi (hash). Tarkistusumme on yksilöllinen merkkijono. Se lasketaan tiedoston sisällöstä erityisellä tavalla. Tämä tarkoittaa, että jokainen teksti vastaa omaa yksilöllistä tarkistusummetaan. Jos tiedoston tekstiä muutettiin, niin myös sen tarkistusume on erilainen ja meidän on vaihdettava se tiedoston nimessä.

Tietenkin tarkistusummien laskeminen käsin ja tiedostojen uudelleennimeäminen ei ole kovin mielekästä. Siksi tätä lähestymistapaa käytetään vain, jos meillä on jokin työkalu, joka mahdollistaa tarkistusummien automaattisen laskemisen ja tiedostojen uudelleennimeämisen, sekä tiedostojen nimien muuttamisen uusiin HTML-tiedostoissa. Webpack mahdollistaa kaiken tämän. Opimme tätä koko oppaan ajan.