按需更新静态资源的核心是url变化与缓存策略协同：用contenthash生成唯一文件名，配合js/css设immutable强缓存、html设no-cache校验，辅以manifest比对或service worker精准接管。
按需更新静态资源的关键不是“清缓存”，而是让浏览器在该更新时自动拉新、不该更新时继续用旧——核心靠 URL 变化 + 缓存策略协同。
用内容哈希生成唯一文件名
文件内容变了，文件名就变，URL 自然不同，浏览器视为全新资源。这是最可靠、最主流的按需更新方式。
- Webpack 中配置 [contenthash]（不是 [hash] 或 [chunkhash]），例如：
filename: 'js/[name].[contenthash:8].js' - Vite 默认开启此行为，无需额外配置；若手动控制，可在
build.rollupOptions.output中设置entryFileNames和chunkFileNames - HTML 中的 script/link 标签由构建工具（如 HtmlWebpackPlugin 或 Vite 的 HTML 插件）自动注入，确保引用与文件名同步
HTTP 缓存头精准分工
静态资源和 HTML 的缓存策略必须差异化，才能既长期缓存又及时更新。
- 带哈希的 JS/CSS/图片等资源：响应头设 Cache-Control: public, max-age=31536000, immutable —— 一年内强缓存，且声明不可变，浏览器不会发起验证请求
- HTML 文件（如 index.html）：设 Cache-Control: no-cache, must-revalidate 或配合 ETag —— 每次访问都向服务器校验是否变化，确保拿到最新哈希引用
- Nginx 或 CDN 配置中按后缀区分规则，避免 HTML 被长缓存
运行时轻量检测补充兜底
用户长时间停留在页面，已加载的 JS 不会自动更新。可加一层主动检查逻辑，仅在必要时触发刷新。
- 启动时请求服务端一个轻量 manifest 接口（返回当前版本所有资源哈希值）
- 对比 localStorage 中上次记录的哈希，若有差异，提示用户“发现新版本”或静默刷新
location.reload(true) - 避免轮询，只在关键入口（如首页加载、登录后）执行一次即可
Service Worker 主动接管（适合 PWA 场景）
需要离线能力或更精细控制时，SW 可拦截请求、管理多版本缓存。
- 每次更新 SW 脚本时，修改缓存名称（如
static-v2→static-v3） -
install阶段打开新缓存并预加载新版资源；activate阶段调用caches.delete('static-v2')清理旧缓存 -
fetch中明确使用当前缓存名匹配，不依赖模糊查找 - 搭配
self.skipWaiting()和clients.claim()让新 SW 立即生效
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
