HTML缓存与脚本缓存完全独立；type="module"脚本复用Module Map且URL不变则不重执行；SPA的index.html须设no-cache，JS/CSS需带内容哈希，CDN需关闭HTML自动优化。
HTML缓存不直接处理脚本文件，它只决定是否缓存 HTML 本身
浏览器对 index.html 的缓存行为，和它里面引用的 script.js 是完全独立的两件事。HTML 文件是否被缓存，只影响用户第一次看到的是哪个版本的 HTML 结构（比如有没有某个 <div id="new-feature">）；而脚本是否执行、执行哪一版逻辑，取决于那个 JS 文件自己的 HTTP 缓存策略和加载方式。<h3>type="module" 脚本有独立的模块缓存机制，和 Cache-Control 无关</h3>
<p>当你写 <code><script type="module" src="app.js"></script>，浏览器会做两件事：先按 HTTP 缓存规则（如 Cache-Control）决定要不要重新下载 app.js；下载后，JS 引擎再查 Module Map——只要 URL 完全一样（包括协议、域名、路径、查询参数），哪怕服务器返回了 Cache-Control: no-cache，模块记录也复用，顶层代码绝不再执行一次。
- 改了 JS 内容但没改 URL？用户仍运行旧逻辑，
import返回的还是旧绑定 - 想强制刷新模块行为？必须改 URL（如加哈希
app.a1b2c3.js），不能靠禁用 HTTP 缓存 -
async或defer不影响模块缓存，只影响执行时机
普通 script 标签依赖纯 HTTP 缓存，容易因 HTML 缓存过长导致错配
这是线上最常出问题的场景：index.html 被设了 Cache-Control: public, max-age=3600，而它引用的 main.js 却用了 immutable, max-age=31536000。结果是：用户长期卡在旧 HTML 里，哪怕你已上线新 JS，按钮文案、路由配置、甚至整个 <router-view> 都不会更新。
- SPA 的
index.html必须短缓存：推荐no-cache或max-age=0, must-revalidate - 确保 JS/CSS 路径带内容哈希（如
main.f8a2e1.js），否则 HTML 缓存再短也没用——浏览器根本不知道该拉新文件 - 不要在 HTML 里内联关键业务脚本，超过 1KB 就外链；否则 parser blocking 会拖慢首屏，缓存再快也白搭
CDN 和反向代理必须分开配置 HTML 与静态资源的缓存策略
很多故障源于把 index.html 和 *.js 丢进同一个 Nginx location 块，统一配了 expires 1y。这会让 HTML 也被长期缓存，彻底失去更新能力。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：单独匹配
location = /index.html，加add_header Cache-Control "no-cache" - 再另配一个
location ~* \.(js|css|png)$，加expires 1y; add_header Cache-Control "public, immutable" - Cloudflare/阿里云 CDN 默认开启 HTML 自动优化（补全标签、删空格），会破坏 SSR 模板结构，必须手动关闭
最危险的盲区不是“怎么设缓存”，而是以为设了 Cache-Control 就万事大吉——HTML 缓存时间越长，对 JS/CSS 路径哈希的依赖就越刚性，漏掉一个哈希，整个更新链就断了。
