文件指纹通过基于内容生成哈希值并嵌入文件名，使url随内容变化而更新，从而强制浏览器重新请求资源；webpack需用[contenthash]而非[hash]，配合htmlwebpackplugin自动注入、nginx长缓存策略及运行时manifest比对实现精准缓存更新。
核心是让内容变化的资源拥有新 URL，浏览器自然不复用旧缓存——文件指纹（即基于内容生成的哈希值）正是实现这一点最直接、最可靠的方式。
为什么文件指纹能强制刷新缓存
浏览器以 URL 为缓存键。如果 JS/CSS 文件名不变（如 app.js），即使内容更新，浏览器仍可能加载旧缓存。而加入内容哈希后，例如变成 app.a1b2c3d4.js，URL 已完全不同，浏览器判定为全新资源，必须重新请求。
- 哈希必须基于文件内容生成（如 Webpack 的
[contenthash]），内容变则哈希变，内容不变则哈希稳，缓存可复用 - 不能用构建级哈希（如
[hash]），否则一次改动导致所有文件名全变，破坏缓存复用
Webpack 中正确生成带指纹的文件名
配置 output 和 plugin，确保资源命名与 HTML 引用自动同步：
- JS/CSS 使用
[contenthash:8]，例如：filename: 'js/[name].[contenthash:8].js' - HTML 模板本身不加哈希，但通过
HtmlWebpackPlugin自动注入带哈希的 script/link 标签 - 图片、字体等静态资源也统一用
[name].[contenthash:6].[ext]控制长度和可读性
Nginx 配合长缓存策略
文件带哈希后，可放心启用强缓存，同时确保 HTML 总是最新：
- 对含哈希路径的资源（如
/js/app.a1b2c3d4.js），设置：Cache-Control: public, max-age=31536000, immutable - 对根目录下的
index.html，设为短缓存或不缓存：Cache-Control: no-cache或max-age=0 - 避免 CDN 或反向代理缓存 HTML 过久，否则用户会加载到引用旧哈希的页面
运行时兜底：前端主动检测更新
仅靠哈希命名还不够——若用户长时间停留，页面内已加载的 JS 可能未刷新。可补充轻量级检测逻辑：
- 启动时请求服务端的
manifest.json（含各资源最新哈希），对比 LocalStorage 中记录的指纹 - 发现不一致时，提示用户刷新，或自动执行
location.reload(true)强制硬重载 - 注意：只存哈希映射，不存资源内容；跨子域名需主应用统一管理；失败时回退到旧路径保可用
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
