静态资源必须用内容哈希命名（如app.a1b2c3.js）并配合Cache-Control: public, max-age=31536000, immutable，HTML则需短缓存（如max-age=300）或no-cache，避免错配与缓存穿透。
只配 Cache-Control: max-age=31536000 不能真正减少请求数——URL 不变，浏览器压根不发新请求，哪怕内容已更新；必须让 URL 随内容变化，再配合缓存头，才能让浏览器“愿意发请求”且“发完就长期复用”。
静态资源必须用内容哈希命名
这是最关键的一步。如果 app.js 每次构建都叫这个名字，哪怕你返回 Cache-Control: public, max-age=31536000，用户第一次加载后，后续所有访问都会直接读磁盘缓存，连请求都不发——改了代码也看不到效果。
- Webpack/Vite/Rollup 默认支持
contenthash或hash，生成类似app.a1b2c3.js、style.f4e5d6.css的文件名 - HTML 中引用这些资源时，必须同步替换为带哈希的路径（构建工具会自动处理）
- CDN 或 Nginx 配置里别写死
/static/app.js，要匹配通配符如/static/*.a1b2c3.js，否则哈希文件可能 404
Cache-Control 要加 immutable 和 public
immutable 告诉浏览器：“这个 URL 对应的内容永远不会变”，它会跳过协商缓存（不发 If-None-Match 或 If-Modified-Since），连 304 请求都省了；public 允许 CDN、代理等中间节点缓存，提升边缘命中率。
- Nginx 示例：
add_header Cache-Control "public, max-age=31536000, immutable"; - 别混用
Expires：它依赖客户端系统时间，用户调快本地时间会导致缓存提前失效 - 避免用
private——除非该 JS 文件里硬编码了用户 token（不推荐），否则一律用public
HTML 文件本身不要长期缓存
入口 HTML 是缓存策略的“开关”，它不能和 JS/CSS 一样设一年。一旦 HTML 缓存太久，里面引用的哈希文件名就过期了，用户会加载到旧 HTML + 新 JS 的错配状态，轻则功能异常，重则白屏。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 建议设
Cache-Control: public, max-age=300（5 分钟）或更短 - 或者用
no-cache（强制协商）：每次请求都带If-None-Match，服务器比对 ETag 后返回 304，既保证新鲜又省带宽 - 开发阶段务必禁用 HTML 缓存，否则热更新失效——Webpack Dev Server 默认是
no-store，别手动覆盖
F5 刷新和地址栏回车行为不同
用户按 F5 刷新时，浏览器会跳过强缓存（忽略 max-age），但仍走协商缓存逻辑；而地址栏回车或点击链接，才完整按 Cache-Control 决策。这意味着：即使你配了 1 年缓存，F5 后仍可能看到一次 304 请求——这不是配置错误，是规范行为。
真正容易被忽略的是缓存穿透点：比如某个图片用了相对路径 ./logo.png，但构建后实际输出为 logo.abcd1234.png，而 HTML 里没更新引用，结果每次都是 404 → 触发降级逻辑 → 多余请求。这类路径错配不会报错，但会悄悄增加请求数。
