静态资源强缓存核心是内容哈希命名+Cache-Control: public, immutable；文件名随内容变化确保URL更新，浏览器自动弃旧取新，HTML则须禁用强缓存以防404。
静态资源实施强缓存策略的核心是“让浏览器放心长期存，且内容一变就自动换新”。这不靠猜、不靠刷新，而靠两件事：文件名随内容变化 + HTTP 响应头明确告诉浏览器“这个地址永远不变”。
用内容哈希命名静态资源文件
如果 JS 或 CSS 文件名始终是 app.js，哪怕内容改了，浏览器仍认为是同一个文件，继续用旧缓存——这是缓存失效最常见的原因。
- 构建时生成带内容哈希的文件名，例如 app.a1b2c3d4.js、style.e5f6g7h8.css
- Webpack 用户：输出配置中用
contenthash（别用hash或chunkhash） - Vite 默认启用内容哈希，一般无需额外设置
- 确保 HTML 中引用的路径也同步更新（html-webpack-plugin 或 Vite 的 HTML 插件会自动处理）
给静态资源配强缓存响应头
一旦文件名自带哈希，就可以安全地设极长缓存时间，并加 immutable 指令，彻底跳过协商验证请求。
- 推荐响应头：Cache-Control: public, max-age=31536000, immutable（即一年）
- 也可配合 Expires 头（如
Expires: Thu, 31 Dec 2027 23:59:59 GMT），但Cache-Control优先级更高 - Nginx 配置示例：
expires 1y;
add_header Cache-Control "public, immutable";
add_header X-Content-Type-Options nosniff;
}
配合 CDN 加速与域名分离
强缓存真正生效，需要用户实际从边缘节点拿到资源，而不是直连源站。
- 静态资源使用独立子域名（如 static.example.com），并接入 CDN
- 前端构建时设置
publicPath指向 CDN 域名（Webpack 的output.publicPath或 Vite 的base） - CDN 控制台中，为该域名配置合理的缓存规则（如 JS/CSS 缓存 30 天以上，图片类可更长）
- 确保 CDN 回源时，Nginx 返回的响应头未被覆盖或清除
避免和 HTML 缓存策略冲突
HTML 本身不能强缓存，否则用户可能一直加载旧 HTML，导致引用的 JS/CSS 路径 404 或功能异常。
- HTML 响应头必须设为：Cache-Control: no-cache 或 max-age=0, must-revalidate
- Nginx 示例：
location = /index.html { add_header Cache-Control "no-cache"; } - 确保 HTML 是轻量级入口，真正承载逻辑和样式的 JS/CSS/图片才是强缓存主力
