Праблема з кешам у браўзерах

Браўзер кешуе падключаныя файлы стыляў 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. Гэтаму мы будзем вучыцца на працягу ўсяго дапаможніка.