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

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