Как быть с кэшированием файлов (css, js, svg...) при их изменении?

Question

[weranda]

Приветствую.

Знаю, что есть кэширование, но не хватает понимания того, как быть в следующей ситуации.

Ситуация
У Google есть инструмент проверки оптимизации сайта и этот инструмент выдает рекомендацию по увеличению сроков кэша фалов. Я могу их увеличить, к примеру, до 365 дней. Я не очень хорошо понимаю то, как быть с людьми, посетившими сайт. У них же, к примеру, файл стилей будет закэширован на 365 дней, а я могу изменить CSS и HTML через 10 дней. Посетитель, зайдя на сайт с закэшированным файлом, будет видеть сайт не так, как это надо, ведь его браузер новые стили не прочитает (возьмет из кэша), а разметку прочитает и для измененной разметки не будет стилей или они будут не теми. Это же касается не только стилей, но и скриптов, различной графики.

Подскажите, пожалуйста, как быть в такой ситуации. Если у вас есть ссылки на полезные материалы по этой теме с примерами, объяснениями, буду признателен за них.

Answer 1

[Алексей Уколов]

ведь его браузер новые стили не прочитает

Бразуер кеширует конкретный файл. Соответственно, для сброса кэша просто меняют путь к файлу.
Простой вариант: добавить get-параметр, в котором будет содержаться время последнего изменения. Но этот вариант требует чтения с диска на сервере, чтобы узнать mtime (не велика беда) и работает не со всеми reverse proxy (некоторые криво настроенные могут игнорировать get-параметры).
Поэтому уже лет десять существуют системы сборки фронтенда, которые прямо в имя файла подставляю хэш от его содержимого. Сейчас это есть для абсолютно любой системы - gulp, webpack, что угодно.
Называется это Cache Busting, вот вам первая попавшаяся статья: https://www.keycdn.com/support/what-is-cache-busting
А ещё, кэш - это не только "не запрашивай файл 365 дней", там много различных функций: https://jakearchibald.com/2016/caching-best-practices/

при их изменении на стороне клиента

Такая формулировка подразумевает, что это клиент что-то меняет. Я уж обрадовался: "о, какой интересный вопрос, есть над чем подумать!"...

Comments

[weranda]

Формулировка подразумевает, что это клиент что-то меняет.

Вроде, если вдуматься, то, да, двусмысленность есть.
Спасибо.

[Stalker_RED]

Клиент может конечно подменить и файл в кеше, и во время загрузки страницы. Даже расширения есть для хрома, resource override, например. Можно инжектнуть свой код в неожиданные места, если не проверяются контрольные суммы
https://developer.mozilla.org/en-US/docs/Web/Secur...