为静态资源与 HTML 设置 HTTP 缓存头

两类资源，两套策略

HTML 是入口，必须在部署后立即更新；带哈希的资源是内容寻址的，内容变化会产生新 URL，因此可以长期缓存。

app.use('/assets', express.static('dist/assets', {
  immutable: true,
  maxAge: '1y',
}));

app.get('*', (_req, res) => {
  res.set('Cache-Control', 'no-cache');
  res.sendFile(path.resolve('dist/index.html'));
});

步骤

1. 确认构建产物文件名包含内容哈希，例如 app.3f9c2a1b.js；没有哈希时不要使用长期缓存。
2. 对哈希资源返回 Cache-Control: public, max-age=31536000, immutable。
3. 对 HTML 返回 Cache-Control: no-cache，让浏览器与 CDN 在每次使用前重新验证；不要给 HTML 设置一年缓存。
4. 用 curl -I 分别检查资源与 HTML 的响应头，并在部署后确认 HTML 引用新的哈希资源。

验证

• 资源响应包含 max-age=31536000, immutable。
• HTML 响应包含 no-cache 以及 ETag 或 Last-Modified。
• 部署后普通刷新会获取新 HTML 和新资源。
• CDN 边缘响应与源站策略一致。

常见问题

no-cache 不是“不存储”，而是“使用前重新验证”；no-store 才会完全禁止缓存，通常不需要用于 HTML。如果 CDN 覆盖或剥离源站头，需要在边缘同时配置缓存策略。immutable 缓存的 URL 无法撤销，变更必须通过新的哈希 URL 发布。