浏览器缓存机制详解：彻底解决前端代码更新缓存问题

1. 给静态文件加上哈希值

使用构建工具（Webpack、Vite 等）在文件名中注入内容哈希：

output: {
  filename: '[name].[contenthash:8].js',
  chunkFilename: '[name].[contenthash:8].chunk.js'
},
plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].[contenthash:8].css'
  })
]

这样生成的文件名类似于 main.3a2b5f7e.js、main.8c3d9e.css。文件内容变化，哈希值就变化，URL 也就变了。

2. HTML 文件：不缓存或短缓存

HTML 文件应该设置较短的缓存时间，或者直接禁用缓存，确保每次请求都拿到最新的资源引用。

通过服务器配置（以 Nginx 为例）：

location / { # 对 HTML 文件设置 no-cache，强制每次验证
    if ($request_uri ~* \.html$) {
        add_header Cache-Control "no-cache, must-revalidate";
    }
    # 对 JS/CSS 等静态资源设置长期缓存
    if ($request_uri ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?|ttf|eot)$) {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

或者在 HTML 的 meta 标签中设置（不推荐，因代理服务器可能忽略）：

<meta http-equiv="Cache-Control" content="no-cache">

3. CDN 缓存控制

如果使用了 CDN，需要协调 CDN 缓存策略。一般原则：

• 对带哈希的文件，设置超长缓存（如 1 年），CDN 和浏览器都会缓存。
• 对 HTML 文件，设置 Cache-Control: no-cache 或较短的 max-age，并开启 CDN 的'回源验证'功能，确保每次请求都回源检查。

4. 处理旧版本资源

带哈希的文件长期缓存后，旧版本的文件不会被删除，会一直占据 CDN 和服务器空间。解决方案：

• 在构建时清理旧文件（如使用 clean-webpack-plugin）。
• 设置 CDN 自动清理过期缓存，或使用版本号目录（如 /v1/, /v2/）来管理。

其他辅助策略

1. 使用 immutable 指令

对于带哈希的文件，可以在 Cache-Control 中添加 immutable 指令，告诉浏览器'这个文件永远不会变'，可以放心缓存。浏览器收到 immutable 后，甚至不会发送条件请求，直接使用缓存。这能进一步提升性能。

Cache-Control: max-age=31536000, immutable

2. 服务端配置 ETag 和 Last-Modified

对于 HTML 等需要验证的资源，保留 ETag 和 Last-Modified，让协商缓存起作用。

3. 动态资源（如 API）的缓存控制

API 接口通常不应被浏览器缓存，或者根据业务需求设置合适的缓存策略。建议设置：

Cache-Control: no-cache, no-store, must-revalidate

实战案例：从混乱到清晰

改造前

• 文件：app.js，style.css，index.html
• 服务器设置：所有资源缓存 1 年
• 问题：更新 app.js 后，用户仍然请求旧 app.js，功能失效。

改造后

1. 构建配置：输出文件为 app.abc123.js，style.def456.css。
2. 服务器配置：
   • 对 .js|.css 等设置 max-age=31536000, immutable。
   • 对 index.html 设置 no-cache 并启用 ETag。
3. 发布流程：
   • 每次发布生成新的哈希文件。
   • index.html 自动更新引用为新的哈希文件。
4. 用户访问：
   • 第一次访问：获取最新 HTML 和资源。
   • 后续访问：HTML 始终回源验证（返回 304 或 200），资源直接使用本地缓存。
   • 发布新版本：HTML 更新，引用的资源 URL 变化，浏览器请求新资源。

可能遇到的坑及解决方案

1. 代理服务器缓存

有些代理服务器（如企业网关）可能会无视 Cache-Control 强制缓存。解决方案：在 URL 中加入版本号或时间戳，但会破坏长期缓存的优势。折衷方案：使用 private 指令，只允许浏览器缓存，不允许中间代理缓存。

2. 哈希计算的不稳定性

Webpack 的 [contenthash] 在不同构建间可能因为模块顺序变化而变化，即使内容没变。解决方案：使用 optimization.moduleIds: 'deterministic' 和 optimization.chunkIds: 'deterministic' 确保模块 ID 稳定。

3. 多页面应用

每个 HTML 都需要独立配置缓存策略，并且要确保引用的资源路径正确。可以使用 HtmlWebpackPlugin 自动注入带哈希的资源。

4. 图片等媒体文件的缓存

图片通常不常变化，也可以使用哈希命名，设置长期缓存。如果图片需要替换，但希望保持相同 URL（如用户头像），则不能使用哈希，而应设置合适的缓存时间并配合版本号参数。

总结

1. HTML 文件：Cache-Control: no-cache，配合 ETag 协商缓存。
2. 带哈希的静态资源：Cache-Control: max-age=31536000, immutable，永久缓存。
3. API 接口：根据业务需求，通常 no-cache 或短时缓存。
4. CDN：遵循上游策略，对带哈希资源设置长时间缓存，HTML 文件设置回源验证。
5. 构建工具：利用 contenthash 确保 URL 随内容变化。

遵循这套策略，你就能彻底解决前端代码更新后的缓存问题，既保证了性能，又实现了无缝更新。用户再也不用清空缓存，产品经理再也不用担心功能覆盖不全。

缓存是把双刃剑，用好它，就能让你的应用既快又可靠。希望本文能帮你彻底掌握浏览器缓存，从此告别缓存困扰！