Проблема с кешем в браузерах

Браузърът кешира свързаните файлове за стилове 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. На това ще се учим през целия учебник.