Браузерлердегі кэш проблемасы

Браузер 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 жасауға мүмкіндік береді. Біз мұны бүкіл оқулық бойынша үйренеміз.