Brauzerlərdə keş problemi

Brauzer CSS stil fayllarını, JavaScript skriptlərini və şəkilləri keşləyir. Keşləmə o deməkdir ki, qoşulan fayllar brauzer tərəfindən yalnız istifadəçinin sayta ilk dəfə gəlişində yüklənir. Sonrakı gəlişlərdə bu fayllar artıq yenidən yüklənməyəcək, əvəzində brauzerin keşindən götürüləcək.

Keşləmə faydalıdır. Bu, saytın yüklənmə sürətini artırmaq üçün yaradılıb. Axı brauzer üçün faylı öz yaddaşından götürmək, onu hər dəfə internetdən yükləməkdən daha sürətlidir.

Ancaq, sürət əvəzində inkişaf zamanı rahatsızlıqla qarşılaşmaq olar. Məsələ budur ki, əgər siz kodunuzda dəyişiklik edib sonra bu dəyişiklikləri hostinqə yükləsəniz - saytınıza artıq gəlmiş olan bütün istifadəçilər köhnə keşlənmiş kod surətini istifadə edəcəklər.

Problemin ilk həlli

Bu davranışla mübarizə aparmaq üçün dəyişdirilən faylları hər dəfə yenidən adlandırmaq lazımdır. Təcrübədə bu, rahat olmadığı üçün hiyləgər bir üsul istifadə olunur. Onun mahiyyəti ondan ibarətdir ki, faylı qoşarkən faylın adından sonra sual işarəsi, bərabər işarəsi və skriptinizin versiya nömrəsini yazırıq. Belə bir konstruksiya GET parametri adlanır.

Faylın adında GET parametrinin olması server baxımından "yolu pozmur", hələ də eyni faylı göstərir. Ancaq brauzer baxımından GET parametrinin dəyişməsi brauzeri faylın yolunun dəyişdiyini hesab etməyə və faylı yenidən yükləməyə məcbur edir.

Keşlə mübarizə aparmaq üçün, kod faylınızda dəyişiklik edəndə GET parametrinin qiymətini bir vahid artırmalısınız. Bu yanaşmanın tətbiqi nümunəsinə baxın:

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

Problemin ikinci həlli

Daha inkişaf etmiş bir yanaşma da mövcuddur. Bu yanaşmada faylların adlarına təsadüfi sətirlər əlavə olunur, məsələn, belə:

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

Bu sətirlər heşlər adlanır. Heş unikal bir sətirdir. O, faylın məzmunundan xüsusi bir şəkildə hesablanır. Bu o deməkdir ki, hər bir mətn öz unikal heşinə malikdir. Əgər faylın məzmunu dəyişdirilibsə, onda onun heşi də fərqli olacaq və biz onu faylın adında dəyişməliyik.

Əlbəttə, heşləri əl ilə hesablamaq və faylları yenidən adlandırmaq xoş bir məşğuliyyət deyil. Buna görə də bu yanaşma yalnız o halda istifadə olunur ki, bizdə heşləri avtomatik hesablaya bilən, faylları yenidən adlandıra bilən və həmçinin HTML fayllarında fayl adlarını yeniləri ilə dəyişə bilən bir alət olsun. Bunların hamısını Webpack etməyə imkan verir. Bunları biz bütün dərslik boyu öyrənəcəyik.