核心是让浏览器信任指纹化css/js不会变，需配cache-control: public, max-age=31536000, immutable；html则必须用no-cache协商缓存，避免新html配旧js导致白屏。
直接解决 CSS 和 JS 缓存不更新的核心，不是调短缓存时间，而是让浏览器“信任它不会变”——前提是文件名本身已带内容哈希（比如 app.8a3f2d.js、style.b4c9e1.css）。只要构建时生成了这类指纹文件，Nginx 就能放心配强缓存。
必须先确认：你的 JS/CSS 文件名是否含 contenthash？
Webpack 用 [contenthash]，Vite 默认开启，ESBuild 可配 --metafile + 插件。如果还是 app.js、style.css 这种固定名，后面所有缓存优化都会失效——浏览器根本分不清新旧版本。
对已指纹化的 CSS/JS，配 immutable 强缓存
在匹配 .js 和 .css 的 location 块里加这一行：
location ~* \.(js|css)$ {
add_header Cache-Control "public, max-age=31536000, immutable";
}
max-age=31536000 是一年秒数，immutable 是关键：它告诉现代浏览器（Chrome/Firefox/Edge）——这个资源一年内绝不会变，连条件请求（If-None-Match）都不用发，直接复用本地副本。性能提升明显，且避免 304 请求的网络开销。
别混用 expires 和 add_header Cache-Controlexpires 1y 会同时写 Expires 和 Cache-Control: max-age，但如果你再用 add_header Cache-Control，后者会完全覆盖前者。统一用 add_header 更可控，也更符合现代规范。
HTML 必须单独处理，不能一起缓存
入口 HTML（如 index.html）哪怕只改一个字符，也会影响整个页面行为。它不能和 JS/CSS 共享缓存策略：
location = /index.html {
add_header Cache-Control "no-cache, must-revalidate";
}
location ~* \.html$ {
add_header Cache-Control "no-cache";
}
否则可能出现“新 HTML + 旧 JS”导致白屏或报错。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
验证是否生效，三步到位
- 打开浏览器开发者工具 → Network → 刷新页面
- 找一个带哈希的
.js或.css文件，点开看 Response Headers - 确认有
Cache-Control: public, max-age=31536000, immutable - 再次刷新，状态码应为
200 (from memory cache)或(from disk cache)，不是304
也可用命令快速检查：
curl -I https://yoursite.com/app.abc123.js
常见失效原因，盯住这几点
- Chrome DevTools Network 标签页勾选了 Disable cache → 关掉再测
- Nginx 用了
proxy_pass回源，后端响应头被覆盖 → 加proxy_ignore_headers Cache-Control; - 构建产物没更新 HTML 中的引用路径 → 检查
index.html里<script src="app.xxxx.js"></script>是否同步变了 - location 正则顺序不对，被更宽泛的规则覆盖 → 把 JS/CSS 规则放在靠前位置，或用
^~提升优先级
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
