У всех нас когда-то бывало вот так:
— У меня не работает, вёрстка битая.
— А вы кэш браузера почистили?
— О, да, почистил, теперь работает, спасибо большое!
Прикольно, кажется как будто ты решил проблему и поэтому молодец. Однако чем дальше мы от нулевых годов, тем чаще вместо просто «спасибо большое» можно услышать:
— Спасибо, почистил, заработало. Теперь помогите пожалуйста обзвонить всех посетителей сайта и им сказать, чтобы тоже почистили.
Уже не так прикольно. Но, как говорится, в чём клиент не прав? Ведь способы кэш-бастинга (cache busting) существуют много лет, и в середине 20-х их не использовать — ну, такое.
В чём тут вообще суть. Суть в том, что браузер, скачав собранные в один файл (style.css например) стили сайта, второй раз его скачивать не хочет. Чтобы у пользователя страница открывалась и отображалась побыстрее. И когда файл стилей вы поменяли: поправили что-то, добавили, улучшили — браузер его второй раз скачивать не будет. Ну, потому что у него уже есть копия, зачем опять. И только когда вы скомандуете браузеру (через Ctrl+F5 или Ctrl+Shift+R) перезагрузить страницу, скачивая всё заново, обновленный styles.css сможет скачаться.
Но мы, очевидно, не можем и не хотим заставлять всех посетителей так делать. А чтобы они увидели наши новые красивые стили — наоборот, хотим. Так что нам каким-то образом надо рассказать браузеру каждого посетителя, что файл устарел и его надо вновь скачать. Как это сделать?
Ничего не кэшировать
Можно настроить сервер, чтобы он отправлял в браузер заголовки, которые сказали бы вообще не кэшировать ассеты (стили, скрипты, картинки). Решение, конечно, ужасное: упадет скорость загрузки страницы, а вслед за ней и скоринг PageSpeed, что повлияет на SEO. Да и вообще, странно это как-то.
Кэш-бастинг через URL файла
Браузеры воспринимают URL с добавленной в query какой-нибудь фигнёй как уникальный. Например, https://mysite.ru/styles/all.css и https://mysite.ru/styles/all.css?kakaya-to-fignya — это два разных URL. Поэтому если при каждом обновлении стилей добавлять к URL какую-нибудь фигню, браузер будет скачивать файл заново. Только фигня должна быть каждый раз новая. Например хэш какой-то, или временная метка.
Кстати, это универсальный способ быстро проверить, если вам кажется что что-то не так работает из-за кэшей на сервере. Добавьте ?abcdef к URL и посмотрите, изменилось ли что-то.
Конечно, необязательно добавлять в query, можно добавить изменения в путь, или в имя файла. Скажем, all.css переименовывать в all.v.1.0.css, all.v.1.1.css и т.д.
Что, руками что ли?
Нет, конечно. Сборщики фронт-энда — Mix, Vite и им подобные — используют именно эту методику для обновления скриптов и стилей. Генерируют какую-нибудь уникальную строчку (хэш) и добавляют к URL агрегированных JS и CSS-файлов, либо меняют имя самого файла. Посмотреть как это работает можно просто установив любой Laravel Starter Kit.
В Drupal агрегированные файлы js и css тоже бастили кэш через изменение имени файла. Но в последних версиях зачем-то намудрили с версиями библиотек, так что теперь если библиотека, в которой изменился CSS, не поменяла версию, движок её и пересобирать не будет, или пересоберет с тем же именем. И кэш-бастинг не сработает. Так что в D10/11 надо быть внимательнее.
И ещё
Помимо CSS и JS браузер так же агрессивно по умолчанию кэширует картинки. Поэтому если вы подменяете, например, логотип, примените эту же методику, или просто используйте другое имя файла — иначе юзерам придется чистить кэш браузера, чтобы узнать, что что-то вообще поменялось. Особенно это касается иконок сайтов (favicons): их браузеры кэшируют особенно яростно.
А вы все еще просите заказчиков почистить кэш браузера на живых сайтах?
