Проблема со кешот во прелистувачите

Прелистувачот кешира прикачени датотеки со 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. На ова ќе учиме во текот на целиот учебник.