强缓存失效后需主动打破缓存链路，首选内容哈希生成唯一文件名，配合服务端长缓存静态资源与短缓存HTML，并通过manifest检测版本实现硬重载。
强缓存失效后，浏览器仍可能沿用旧资源，关键不是等它“自动过期”，而是主动打破缓存链路——核心思路是让新资源拥有新 URL 或强制浏览器跳过缓存机制。
用内容哈希生成唯一文件名（推荐首选）
这是生产环境最稳定、最通用的方案。Webpack/Vite 等构建工具支持基于文件内容生成哈希，确保内容变则 URL 变：
- JS/CSS 配置 [contenthash:8]（如
app.a1b2c3d4.js），而非[hash]或[chunkhash] - HTML 由 HtmlWebpackPlugin 自动注入带哈希的 script/link 标签，避免手动维护出错
- 图片、字体等静态资源也统一加
[contenthash:6]，兼顾可读性与唯一性
服务端配合长缓存 + HTML 短缓存
文件带哈希后，可放心启用强缓存策略，但必须隔离 HTML 的缓存行为：
- 对 JS/CSS/图片等带哈希路径的资源，返回
Cache-Control: public, max-age=31536000, immutable - 对
/index.html，返回Cache-Control: no-cache或max-age=0，防止 CDN 缓存旧 HTML 引用过期哈希 - 若用 Nginx，可在 location 块中按扩展名分别配置响应头
前端运行时检测并触发硬重载
适用于用户长时间停留页面、已加载旧 JS 但服务端已发布新版的场景：
立即学习“Java免费学习笔记（深入）”；
- 启动时 fetch 一个轻量版
/manifest.json（含当前所有资源哈希），对比 localStorage 中记录的版本 - 发现不一致时，调用 location.reload(true) —— 它在 Chrome 120+、Firefox 115+、Edge 120+ 均有效，会忽略 HTTP 缓存、Service Worker 响应及 DOM 快照
- 注意提示用户：该操作将清空表单输入和滚动位置
开发调试时快速击穿缓存
无需改构建配置，适合本地验证或临时绕过：
- 在资源链接后加时间戳参数，如
<script src="app.js?t=1723555740"></script> - 使用 Chrome/Firefox 开发者工具 → Network 面板 → 勾选 Disable cache，再刷新
- 右键刷新按钮 → 选择 清空缓存并硬性重新加载（等效于 Ctrl+Shift+R）
