核心是让内容变化的资源拥有新URL，浏览器自然不复用旧缓存；文件指纹哈希值基于内容生成（如Webpack的[contenthash]），确保内容变则URL变、内容不变则缓存复用，并需配合HTML自动注入、静态资源哈希命名及服务端长/短缓存策略协同生效。
浏览器缓存通过文件名哈希更新，核心是让每个资源的 URL 随内容变化而改变——URL 一变，浏览器就当它是新资源，自动跳过旧缓存、发起新请求。
为什么改文件名就能更新缓存
浏览器以完整 URL 为缓存键。如果一直用 app.js，哪怕你替换了文件内容，只要 URL 不变，强缓存期内它就直接读本地副本，根本不会发请求。加上哈希后变成 app.a1b2c3d4.js，URL 已完全不同，浏览器无从复用，只能重新下载。
关键点在于：哈希必须基于文件内容生成（比如 Webpack 的 [contenthash]），而不是构建时间或随机值。这样内容没改，哈希就不变，缓存还能继续用；内容一改，哈希立刻变，URL 更新，缓存自然失效。
Webpack 中正确配置 contenthash
避免用全局 [hash]（一次改动导致所有文件名全变，浪费缓存），按资源类型精准控制：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- JS/CSS 主文件和分块：用
filename: 'js/[name].[contenthash:8].js' - HTML 模板本身不加哈希，但需靠
HtmlWebpackPlugin自动把带哈希的 script/link 标签注入进去 - 图片、字体等静态资源：统一设为
[name].[contenthash:6].[ext]，兼顾可读性与唯一性
服务端配合长缓存策略
文件名带哈希后，就可以放心启用强缓存，但 HTML 必须反着来：
- 对
/js/app.a1b2c3d4.js这类资源，Nginx 或 CDN 设置：Cache-Control: public, max-age=31536000, immutable - 对根目录下的
index.html，必须设为短缓存或不缓存：Cache-Control: no-cache, must-revalidate或max-age=0 - 否则用户可能卡在旧 HTML 页面里，里面引用的还是上一版的哈希文件名
补充：运行时主动检测更新（兜底）
仅靠哈希命名还不够。用户若长时间停留在页面，已加载的 JS 不会自动刷新。这时可在前端加一层逻辑：
- 定时请求新版
manifest.json或index.html，比对其中 JS 文件名哈希是否变化 - 发现不一致时，提示用户“有新版本”，并触发页面重载或热更新（如结合
import()动态加载新 chunk） - Service Worker 也可预缓存核心资源，并用
stale-while-revalidate策略平衡速度与新鲜度
