Problema cu cache-ul în browsere

Browserul cachează fișierele de stiluri CSS, scripturile JavaScript și imaginile conectate. Cache-ul înseamnă că fișierele conectate sunt descărcate de browser doar la prima accesare a utilizatorului pe site. La accesările ulterioare aceste fișiere nu vor mai fi descărcate din nou, ci vor fi preluate din cache-ul browserului.

Cache-ul este util. Acesta este creat pentru creșterea vitezei de încărcare a site-ului. Întrucât este mai rapid pentru browser să ia un fișier din stocarea sa proprie, decât să îl descarce de fiecare dată din internet.

Cu toate acestea, pentru viteză trebuie să plătești cu inconveniențe în dezvoltare. Ideea este că dacă schimbi ceva în codul tău și apoi publici modificările pe hosting - toți utilizatorii care au accesat deja site-ul tău vor avea o copie veche a codului din cache.

Prima soluție a problemei

Pentru a combate acest comportament este nevoie ca de fiecare dată să redenumești fișierele modificate. În practică acest lucru nu este convenabil, de aceea se folosește un procedeu ingenios. Esența lui constă în faptul că la conectarea fișierului după numele fișierului punem semnul întrebării, egal și numărul versiunii scriptului tău. O astfel de construcție se numește parametru GET.

Prezența parametrului GET în numele fișierului "nu strică" calea din punctul de vedere al serverului, indicând în continuare către același fișier. Dar din punctul de vedere al browserului, modificarea parametrului GET îl obligă pe browser să considere că calea către fișier s-a schimbat și să descarce fișierul din nou.

Pentru a combate cache-ul, când introduci modificări în fișierul tău cu cod, va trebui să mărești valoarea parametrului GET cu o unitate. Urmărește exemplul de aplicare al abordării similare:

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

A doua soluție a problemei

Există și o abordare mai avansată. Aceasta constă în faptul că la numele fișierelor se adaugă șiruri aleatorii, de exemplu, așa:

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

Aceste șiruri se numesc hash-uri. Hash-ul reprezintă un șir unic. Acesta este calculat din conținutul fișierului într-un mod special. Aceasta înseamnă că fiecărui text îi corespunde propriul său hash unic. Dacă textul fișierului a fost modificat, atunci și hash-ul lui va fi diferit și va trebui să îl schimbăm în numele fișierului.

Desigur, să calculezi hash-urile manual și să redenumești fișierele este o activitate neplăcută. De aceea această abordare este folosită doar în cazul în care avem un instrument care permite calcularea automată a hash-urilor și redenumirea fișierelor, precum și modificarea numelor fișierelor cu cele noi în fișierele HTML. Toate acestea le permite să facă Webpack. Acestea le vom învăța pe parcursul întregului tutorial.