Продолжаем рубрику, в которой разбираем реальные инженерные ситуации и ищем причины проблем, которые чаще всего проявляются уже в продакшене.
Сегодня под микроскопом — кэширование браузера
// HTML
<link rel="stylesheet" href="/css/style.css"><script src="/js/app.js"></script>
Вопрос:Вы исправили баг, выкатили новую версию приложения, деплой прошёл успешно…
Но часть пользователей продолжает видеть старый интерфейс.
Почему Сначала кажется, все верно:
Новый код загружен на сервер; Сборка завершилась без ошибок; Приложение доступно.Но проблема может быть совсем не в сервере.
Браузер уже сохранил файлы:
// text
/css/style.css
/js/app.js
и при следующем открытии страницы может использовать их из собственного кэша.
В результате пользователь продолжает работать со старой версией приложения, хотя на сервере уже лежит новая.
Как обычно решают эту проблему?Во многих проектах к имени файла автоматически добавляют хэш:
// HTML
<link rel="stylesheet" href="/css/style.a4f91c.css"><script src="/js/app.82de13.js"></script>После новой сборки хэш меняется:
// text
app.82de13.js ↓app.f93b11.jsДля браузера это уже новый файл, поэтому он скачивает его заново, а не использует старую версию из кэша.
Именно поэтому современные инструменты сборки (Webpack, Vite, Rollup и другие) по умолчанию добавляют хэш в имена файлов.
Если после релиза пользователи говорят: «У меня всё осталось по-старому», не спешите искать ошибку в коде.
Сначала проверьте, не связана ли проблема с кэшированием и версионированием статических файлов.
А вам приходилось сталкиваться с ситуацией, когда причина бага оказалась не в коде, а в старой версии файлов, оставшейся в кэше?
#Y_LAB_University #Y_LAB_Actual
