核心是切断旧缓存复用路径，让内容变更必然触发新请求：通过哈希文件名（如app.7a2b1c.js）确保URL随内容变化，配合Nginx的expires 1y与Cache-Control "public, immutable"实现强缓存，禁用协商缓存干扰，并隔离CDN、Nginx、后端各层缓存职责。
核心是切断旧缓存复用路径，让内容变更必然触发新请求——不依赖浏览器或中间层“清缓存”，而靠 URL 变更 + 头部协同 + 缓存隔离实现版本强一致。
用哈希文件名替代时间戳或版本号
静态资源（JS/CSS/图片）在构建时生成带内容哈希的文件名，例如 app.7a2b1c.js、style.f3e8d9.css。只要内容变，哈希就变，URL 就不同，浏览器和 CDN 自然视为全新资源，旧缓存完全失效。
- 模板中通过构建插件或后端变量注入真实路径，避免硬编码
/static/app.js - Nginx 配置中无需特殊缓存逻辑，可放心设长有效期：
expires 1y;+add_header Cache-Control "public, immutable"; - CDN 和代理层也认 URL，不会忽略 query 参数或误判为同一资源
禁用协商缓存干扰，明确控制强缓存行为
当资源 URL 不变（如始终是 /static/app.js），仅靠修改文件内容无法触发更新。此时必须干预浏览器缓存策略，防止它复用旧响应。
- 在静态资源 location 块中加：
add_header Cache-Control "max-age=0, must-revalidate"; - 配合
expires epoch;，确保每次请求都携带If-Modified-Since或If-None-Match - 注意：不要全局设
no-store，它会彻底放弃缓存收益；no-cache是兼顾验证与性能的合理选择
隔离多层缓存职责，避免策略叠加污染
若前端请求经过 CDN → Nginx → 后端，各层缓存策略若未对齐，极易出现版本错乱：CDN 返回旧版 JS，Nginx 却缓存了新版 HTML，导致执行不匹配。
- CDN 专注广域分发：只缓存带哈希的静态资源，TTL 设为 1 年；其他路径（如
/api/、含 Cookie 的页面）全部 bypass - Nginx 专注动态内容：对 API 或个性化页面启用
proxy_cache，并用$http_cookie等变量构造差异化 key - 回源时用
proxy_hide_header Cache-Control;清除后端错误头，再由 Nginx 注入标准缓存指令，防止 CDN 解析混乱
校验 MIME 类型与响应头一致性
样式错乱但无控制台报错？很可能是 Nginx 返回了 text/plain 而非 text/css，浏览器拒绝解析 CSS 规则。
- 确认
include mime.types;已在 http 块顶层启用 - 检查是否漏配或路径错误（如 OpenResty 中需指定完整路径：
include /usr/local/openresty/nginx/conf/mime.types;） - 补一个兜底：
default_type text/html;或default_type application/octet-stream;，避免 fallback 到text/plain
