HTML缓存需禁用强缓存并启用ETag协商，静态资源加哈希后设1年缓存+immutable；备用方案为HTML用版本路径或URL参数隔离；可选JS检查/version.json自动刷新。
HTML页面缓存失效与版本号更新，核心在于让浏览器在资源变更时主动加载新版本，而不是复用旧的缓存。Nginx本身不生成版本号，但可以配合前端构建策略（如文件哈希、HTML内联版本标记）实现精准缓存控制。
静态资源（JS/CSS/图片）加哈希指纹，自动触发更新
前端构建工具（Webpack/Vite）默认支持为输出文件名添加内容哈希，例如 app.a1b2c3d4.js。这类文件天然具备“内容不变则路径不变，内容一变则路径必变”的特性。
Nginx只需对带哈希的静态资源设置长期缓存：
location ~* \.(js|css|png|jpg|gif|webp|woff2|ttf)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}注意：immutable 告诉浏览器该资源永不过期、无需校验，大幅提升重复访问性能。
立即学习“前端免费学习笔记（深入）”；
HTML文件禁用强缓存，启用协商缓存
HTML是入口文件，必须每次检查是否更新。不能设 expires 或 Cache-Control: max-age，否则用户永远看不到新版本。
推荐配置：
location / {
# 禁用强缓存
add_header Cache-Control "no-cache";
# 启用 ETag + Last-Modified 协商缓存
etag on;
if_modified_since exact;
}这样浏览器每次请求 HTML 都会发一个带 If-None-Match 或 If-Modified-Since 的条件请求，Nginx 校验后返回 304（未修改）或 200（新内容），既保证及时更新又节省带宽。
通过 URL 参数或子目录隔离 HTML 版本（备用方案）
若无法控制 HTML 内容哈希（如 CMS 动态生成），可用构建时注入版本标识，例如：
- 生成
/v1.2.0/index.html，Nginx 配置alias /var/www/v1.2.0/; - 或重写为带参数：访问
/index.html?v=1.2.0，后端忽略参数，但浏览器视其为不同URL
⚠️ 注意：URL 参数方式对 CDN 和代理友好，但需确保所有内部链接、跳转、PWA 的 manifest 引用同步更新，否则可能混用旧资源。
配合前端自动刷新（可选增强体验）
在 HTML 中加入轻量 JS 检查当前页面版本（比如读取 /version.json），发现不一致时提示用户刷新或自动 reload：
<script>
fetch('/version.json?_t='+Date.now())
.then(r => r.json())
.then(data => {
if (data.version !== window.APP_VERSION) {
location.reload();
}
});
</script>搭配 Nginx 对 /version.json 设置短缓存（如 60s），即可实现“近实时”版本感知。
