html文件本身不应长期缓存，应设no-cache或短时max-age；静态资源需用内容哈希命名并配immutable指令实现强缓存，cdn策略须与源站响应头一致。
HTML 文件本身不值得长期缓存，真正能提速的是把 index.html 当作“索引”，让 CSS、JS、图片等静态资源走强缓存。 盲目给 HTML 加 max-age=3600 是线上最常见的翻车点——用户刷新后仍看到旧按钮、旧文案、甚至缺失的模块，因为浏览器根本没发请求去校验更新。
为什么不能直接给 index.html 配 public, max-age=3600
这是多数人踩的第一个坑。静态网站 ≠ 所有内容都不变：index.html 里常嵌入时间戳、版本号、动态路径（如 /blog/latest），或依赖 JS 运行时注入内容。一旦它被强缓存，后续所有资源（哪怕带哈希）都可能被旧 HTML 错误引用。
-
Cache-Control: public, max-age=3600会让浏览器跳过所有验证，一小时内永远读本地副本 - 即使你已上线
main.x8y9z0.js，旧 HTML 仍可能加载main.a1b2c3.js，导致白屏或功能异常 - CDN 或代理层若也缓存了该 HTML，问题会放大到整个地区用户
静态资源必须用内容哈希 + immutable
这才是提升首屏速度的核心动作。浏览器对带哈希的 URL 默认启用强缓存，配合 immutable 可跳过协商请求，减少一次 HTTP 往返。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 构建时确保输出文件名含内容哈希，例如
styles.ea4f2d.css、app.7b8c1a.js - Nginx 配置中为这些资源显式设置：
expires 1y;+add_header Cache-Control "public, immutable"; - Apache 用户可用
ExpiresByType，但必须排除text/html类型，只作用于.css、.js、.png等扩展名 - 不加
immutable时，浏览器在后续访问仍会发If-None-Match请求验证，哪怕资源 URL 没变
index.html 应该设什么缓存策略
取决于你的部署流程和内容动态性。没有“通用安全值”，只有匹配场景的配置。
- 纯静态生成（如 Hugo/Jekyll 输出，无运行时 JS 注入）：可设
Cache-Control: public, max-age=300（5 分钟），平衡 CDN 回源压力与更新及时性 - 含少量动态片段（如通过
htmx加载评论）：用no-cache，强制每次发请求，但后端需提供ETag或Last-Modified，以便返回304 Not Modified - 使用 CI/CD 自动发布且 HTML 变更即上线：推荐
no-store，彻底禁用缓存——省去验证逻辑，避免任何错配风险 - 绝对不要用
<meta http-equiv="Cache-Control" content="...">：Chrome/Firefox/Edge 完全忽略它，仅旧版 Safari 可能降级识别
最容易被忽略的一点是协同：CDN 缓存规则必须和源站响应头一致。比如你在 Nginx 设了 max-age=300，但 Cloudflare 控制台里写了“Cache Everything”，那浏览器实际拿到的就是 CDN 覆盖后的策略——你调了半天后端 header，结果全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
