Problemi me cache në shfletues

Shfletuesi cache skedarët e lidhur të stileve CSS, skriptave JavaScript dhe imazheve. Cache do të thotë se skedarët e lidhur shfletuesi i shkarkon vetëm gjithë herën e parë që përdoruesi viziton faqen. Në vizitat e mëvonshme këta skedarë nuk do të shkarkohen përsëri, por do të merren nga cache i shfletuesit.

Cache është e dobishme. Është krijuar për të rritur shpejtësinë e ngarkimit të faqes. Në fund të fundit, është më e shpejtë për shfletuesin të marrë një skedar nga depoja e tij, sesa ta shkarkojë atë çdo herë nga interneti.

Sidoqoftë, për shpejtësinë paguhet me papërshtatshmëri gjatë zhvillimit. Çështja është se nëse ju ndryshoni diçka në kodin tuaj dhe më pas i ngarkoni ndryshimet në hosting - të gjithë përdoruesit që kanë vizituar tashmë faqen tuaj do të kenë një kopje të vjetër të kodit në cache.

Zgjidhja e parë e problemit

Për të luftuar këtë sjellje duhet çdo herë të riemërtoni skedarët e ndryshuar. Në praktikë kjo nuk është e përshtatshme, prandaj përdoret një mashtrim i zgjuar. Thelbi i tij qëndron në faktin se gjatë lidhjes së skedarit pas emrit të skedarit vendosim pikëpyetje, shenjë barazimi dhe numrin e versionit të skriptit tuaj. Një konstrukt i tillë quhet parametër GET.

Prania e një parametri GET në emrin e skedarit "nuk e prish" rrugën nga këndvështrimi i serverit, duke treguar përsëri të njëjtin skedar. Por nga këndvështrimi i shfletuesit, ndryshimi i parametrit GET e detyron shfletuesin të konsiderojë se rruga te skedari ka ndryshuar dhe ta shkarkojë skedarin përsëri.

Për të luftuar cache-in, kur ju bëni ndryshime në skedarin tuaj me kod, ju do të duhet të rrisni vlerën e parametrit GET për një. Shikoni shembullin e zbatimit të këtij qasjeje:

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

Zgjidhja e dytë e problemit

Ekziston edhe një qasje më e avancuar. Ajo qëndron në faktin se në emrat e skedarëve shtohen vargje të rastësishme, për shembull, kështu:

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

Këto vargje quhen hash. Hash përfaqëson një varg unik. Ai llogaritet nga përmbajtja e skedarit në një mënyrë të veçantë. Kjo do të thotë se çdo teksti i përgjigjet hash-it të vet unik. Nëse teksti i skedarit është ndryshuar, atëherë edhe hash-i i tij do të jetë i ndryshëm dhe ne do të duhet ta ndryshojmë atë në emrin e skedarit.

Sigurisht, të llogaritësh hash dhe të riemërtosh skedarët me dorë është një punë e mërzitshme. Prandaj kjo qasje përdoret vetëm në rast se kemi ndonjë mjet që lejon llogaritjen automatikisht të hash-ëve dhe riemërtimin e skedarëve, si dhe ndryshimin e emrave të skedarëve në të rinj në skedarët HTML. Të gjitha këto i lejon të bëjë Webpack. Këtë do të mësojmë gjatë gjitë tutorialit.