Браузерлердеги кэш менен маселе

Браузер CSS стилдердин файлдарын, JavaScript скрипттерин жана сүрөттөрдү кэштейт. Кэштөө дегенди билдирет, браузер колдонуучу сайтка биринчи жолу киргенде гана тиркелген файлдарды жүктөйт. Кийинки кирүүлөрдө бул файлдар дагы жүктөлбөйт, алар браузердин кэшинен алынат.

Кэштөү пайдалуу. Ал сайттын жүктөлүш ылдамдыгын жогорулатуу үчүн түзүлгөн. Себеби браузер үчүн файлды интернеттен ар дайым жүктөгөнө караганда өзүнүн сактоочу жеринен алуу тезирээк.

Бирок, ылдамдык үчүн иштеп чыгуудагы ыңгайсыздык менен төлөшүү керек. Иш жүзүндө, эгер сиз өз кодуңузда бир нерсени өзгөртсөңүз жана андан кийин өзгөртүүлөрдү хостингке жайгаштырсаңыз - сиздин сайтка мурун кирип көргөн бардык колдонуучулар коддун эски кэштелген көчүрмөсүнө ээ болушат.

Маселени биринчи чечими

Мындай аракеттер менен күрөшүү үчүн ар жолу өзгөртүлгөн файлдарды атын өзгөртүү керек. Иш жүзүндө бул ыңгайлуу эмес, ошондуктан адилеттүү ыкма колдонулат. Анын мүлкү мында, файлды туташтырганда аталыштан кийин файл суроо белгиси, барабар белгиси жана номерин коюңуз скриптиңиздин версиясы. Мындай курулма GET параметри деп аталат.

Файл атындагы GET параметринин болушу "бузбайт" сервердин көз карашынан жол, дагы деле ошол эле файлга көрсөтөт. Бирок браузердин көз карашы боюнча GET параметрин өзгөртүү браузерди мажбурлайт файлга барабар жол өзгөргөн деп эсептеңиз жана файлды кайра жүктөңүз.

Кэш менен күрөшүү үчүн, өзгөртүүлөр киргизгенде код файлыңызда, сиз көбөйтүү керек болот бирдик менен GET параметринин мааниси. Колдонулушуна көз салыңыз ушул сыяктуу мамиле:

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

Маселени экинчи чечими

Жана дагы өнүктүрүлгөн мамиле бар. Ал файл аттарына кошулат дегенди билдирет кокустук саптар кошулат, мисалы, мындай:

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

Бул саптар хештер деп аталат. Хеш уникалдуу сапты түзөт. Ал файлдын мазмунунан эсептелет атайын жол менен. Бул ошону билдирет ар бир текст өзүнүн уникалдуу хешине туура келет. Эгер текст файлы өзгөртүлсө, анда анын хеши башкача болот жана биз аны өзгөртүшүбүз керек файл атында.

Албетте, кол менен хештерди эсептөө жана файлдарды өзгөртүү андан кийинки иш. Ошондуктан бул мамиле колдонулат эгер бизде болсо гана хештерди автоматтык түрдө эсептөөгө мүмкүндүк берген кандайдыр бир курал бар жана файлдардын атын өзгөртүү, ошондой эле HTML файлдарында файл аттарын жаңы аттар менен алмаштыруу. Мунун баарын Webpack жасай алат. Биз муну окуп үйрөнөбүз бүт окуу куралы боюнча.