Brauzerlarda keshlash muammosi

Brauzer CSS uslub fayllarini, JavaScript skriptlarini va rasmlarni keshlaydi. Keshlash deganda, brauzer fayllarni faqat foydalanuvchi saytga birinchi marta kirganda yuklab oladi. Keyingi safarlarda bu fayllar qayta yuklanmaydi, balki brauzerning keshidan olinadi.

Keshlash foydalidir. Bu saytning yuklanish tezligini oshirish uchun yaratilgan. Axir, brauzer uchun faylni har safar internetdan yuklab olishdan ko'ra, o'z saqlash joyidan olish ancha tezroq.

Biroq, tezlik uchun rivojlanishdagi qulaylikdan voz kechish kerak. Gap shundaki, agar siz kodingizda o'zgartirishlar qilsangiz va keyin ushbu o'zgartirishlarni hostingga joylashtirsangiz - saytingizga allaqachon kirgan barcha foydalanuvchilar eski keshlangan kod nusxasiga ega bo'lishadi.

Muammoni hal qilishning birinchi usuli

Bunday xatti-harakarga qarshi kurashish uchun o'zgartirilgan fayllarni har safar qayta nomlash kerak. Amalda bu qulay emas, shuning uchun aqlli usul qo'llaniladi. Uning mazmuni shundan iboratki, fayl nomidan keyin so'roq belgisi, tenglik belgisi va skriptingiz versiya raqamini qo'yamiz. Bunday konstruksiya GET parametri deb ataladi.

Fayl nomida GET parametrining mavjudligi server nuqtai nazaridan yo'lni "buzmaydi", hanma oldingidek o'sha faylga ishora qiladi. Lekin brauzer nuqtai nazaridan GET parametrining o'zgarishi brauzerni faylga yo'l o'zgargan deb hisoblashga va faylni qayta yuklashga majbur qiladi.

Keshga qarshi kurashish uchun, kodingizdagi faylda o'zgartirishlar kiritganingizda, GET parametrining qiymatini bittaga oshirishingiz kerak. Quyida shunday yondashuvning qo'llanilish misolini ko'ring:

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

Muammoni hal qilishning ikkinchi usuli

Yanada rivojlanganroq yondashuv ham mavjud. U fayl nomlariga tasodifiy satrlar qo'shilishidan iborat, masalan, quyidagicha:

<!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 satrlar xeshlar deb ataladi. Xesh noyob satrni ifodalayadi. U maxsus usul bilan fayl tarkibidan hisoblanadi. Demak, har bir matn o'ziga xos noyob xeshga ega. Agar fayl matni o'zgartirilgan bo'lsa, uning xeshi ham boshqacha bo'ladi va biz uni fayl nomida o'zgartirishimiz kerak.

Albatta, qo'l bilan xeshlarni hisoblash va fayllarni qayta nomlash yomon mashg'ulot. Shuning uchun bu yondashuv faqat bizda xeshlarni avtomatik hisoblash, fayllarni qayta nomlash va shuningdek, HTML fayllarida fayl nomlarini yangilariga o'zgartirish imkonini beruvchi qandaydir vositamiz bo'lganda qo'llaniladi. Bularning barchasini Webpack amalga oshirishga imkon beradi. Biz bularni butun o'quv qo'llanma davomida o'rganamiz.