核心是让内容变化的资源拥有新url,浏览器自然不复用旧缓存;文件指纹哈希值基于内容生成(如webpack的[contenthash]),确保内容变则url变、内容不变则缓存复用,并需配合html自动注入、静态资源哈希命名及服务端长/短缓存策略协同生效。

浏览器缓存通过文件名哈希更新,核心是让每个资源的 URL 随内容变化而改变——URL 一变,浏览器就当它是新资源,自动跳过旧缓存、发起新请求。
为什么改文件名就能更新缓存
浏览器以完整 URL 为缓存键。如果一直用 app.js,哪怕你替换了文件内容,只要 URL 不变,强缓存期内它就直接读本地副本,根本不会发请求。加上哈希后变成 app.a1b2c3d4.js,URL 已完全不同,浏览器无从复用,只能重新下载。
关键点在于:哈希必须基于文件内容生成(比如 Webpack 的 [contenthash]),而不是构建时间或随机值。这样内容没改,哈希就不变,缓存还能继续用;内容一改,哈希立刻变,URL 更新,缓存自然失效。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
Webpack 中正确配置 contenthash
避免用全局 [hash](一次改动导致所有文件名全变,浪费缓存),按资源类型精准控制:
- 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策略平衡速度与新鲜度
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










