Браузерларда кеш муаммоси

Браузер CSS услубий файллари, JavaScript скриптлари ва расмларни кешлайди. Кешлаш дегани, браузер уланган файлларни фақат фойдаланувчи веб-сайтга биринчи марта кирганда юклаб олади. Кейинги киришларинда бу файллар яна юкланмайди, балки браузернинг кешидан олинади.

Кешлаш фойдали. У веб-сайтнинг юкланish тезлигини ошириш учун яратилган. Axir браузер учун файлни ўз сақловидан олиш, ҳар сафар уни интернетдан юклаб олишдан тезроқ.

Бирок, тезлик учун қийинчилик ишлаб чиқариш жараёнида тўланади. Гap иш ўзи шундаки, агар сиз кодингизда ўзгартириш киритсангиз ва сўнг ўзгартиришларни хостинга joylasangiz - аллақачон веб-сайтингизга кирган барча фойдаланувчилар эски кешланган код нусхасига эга бўлади.

Муаммонинг биринчи ҳал этилиши

Бундай ҳаракатларга қарши курашиш учун ҳар сафар ўзгартирилган файлларнинг номини ўзгартириш керак. Амалиётда бу қулай эмас, шунинг учун аqлли usul қўлланилади. Унинг маъноси шундаки, файл уланганда, файл номидан кейин savol belgisi, tenglik belgisi ва скриптингизнинг версия raqami қўйилади. Бу конструкция GET параметри деб аталади.

Файл номидаги GET параметрининг мавжудлиги сервер нуқтаи назаридан йўлни "бузмайди", ҳали хам ўsha файлга ишора қилади. Лекин браузер нуқтаи назаридан GET параметрининг ўзгариши браузерни файл йўли ўзгарган деб ҳисоблашга ва файлни яна юклаб олишга мажбурлайди.

Кешга қарши курашиш учун, қачон сиз код файлингизга ўзгартиришлар киритсангиз, GET параметрининг қийматини бирга oshirishingiz керак бўлади. Бу usulни қўллаш мисолини кўриб чикинг:

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

Муаммонинг иккинчи ҳал этилиши

Яна илғор usul мавжуд. У файл номларига тасodifiy satrlar qo'shilishidan иборат, мисол учун, шунингдек:

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

Бу сатрлар хешлар деб аталади. Хеш ўзига хос бир қатордир. У файлнинг муhtавиётидан махсус usulda ҳисобланади. Бу файлнинг ҳар бир матни ўзига хос хешга эга эканлигини англатади. Агар файл матни ўзгартирилган бўлса, унда унинг хеши ҳам бошқача бўлади ва биз уни файл номида ўзгартиришимиз керак бўлади.

Албатта, қўл bilan хешларни ҳисоблаш ва файлларнинг номларини ўзгартириш жуда ҳам yoqimli ish эмас. Шунинг учун бу usul фақат бизда хешларни автоматик ҳисоблаш, файлларнинг номларини ўзгартириш, шунгингдек HTML файлларда файл номларини янгиларига ўзгартириш имконини берадиган бирор асбоб бўлган тақдирдагина қўлланилади. Бунинг ҳаммасини Webpack қила олади. Биз буни дарслик давомида ўрганамиз.