必须变更url才能触发新请求，因浏览器只认url；html须短缓存，静态资源需内容哈希+immutable响应头，版本参数应使用构建时注入的commit hash或时间戳，禁用随机数。
浏览器只认 URL，不认文件内容是否更新。靠改 S3 文件、重传同名图片或等缓存过期，根本无效；必须让 HTML 中引用的资源 URL 本身变化，才能触发新请求。
HTML 文件自身必须短缓存
如果 index.html 被强缓存（比如 Cache-Control: max-age=31536000），浏览器连请求都不发，自然不会加载带新版本号的 JS/CSS 路径——新哈希永远进不来。
- Nginx 配置应针对 HTML 单独设策略：
location = /index.html { add_header Cache-Control "no-cache, must-revalidate"; } - 开发时用 Vite/webpack-dev-server 默认内存缓存，改完 HTML 不重启服务就看不到效果
- 不要依赖
<meta http-equiv="Cache-Control">，现代浏览器完全忽略它
静态资源（JS/CSS/图片）要带内容哈希 + immutable 响应头
光在文件名里加哈希（如 app.a1b2c3.js）不够，服务端没配对响应头，浏览器仍可能复用旧缓存。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 构建工具（Webpack/Vite）需启用
contenthash，避免内容未变但哈希乱跳 - 服务端必须返回
Cache-Control: public, immutable, max-age=31536000；immutable是关键，它告诉浏览器“URL 不变 = 内容绝不变”，跳过后续条件请求 - 若 CDN 不支持
immutable，至少确保 ETag 与文件内容强绑定，否则协商缓存可能失效，返回 200 而非 304
background-image 和 ![]()
的 URL 版本参数不能乱加
用 url("photo.jpg?v=20261001") 或 <img src="photo.jpg?version=2.1"> 是可行的，但参数生成方式直接影响缓存效率。
- 禁止用
Math.random()或毫秒时间戳拼接，否则每次渲染都触发新请求，彻底废掉缓存 - 推荐用构建时注入的值：Git commit hash、语义化版本号（如
v2.1.0）、或构建时间戳（20261001） - S3/CDN 不校验查询参数，
?v=xxx纯为绕过浏览器缓存，不影响资源读取 - 若用 CSS-in-JS 或 Vue/React 动态绑定，可直接拼：
backgroundImage: `url(${src}?v=${version})`
Service Worker 缓存名必须带版本号，且 HTML 必须显式加入缓存列表
SW 不会因为 HTML 文件内容变了就自动更新缓存，它只认 caches.open('pages-v2.1.0') 这个字符串。复用固定缓存名等于把新旧资源混在一个桶里。
- 每次部署必须变更缓存名，格式建议
pages-${VERSION}或assets-${BUILD_HASH} -
install阶段必须显式cache.addAll(['/index.html', '/offline.html'])，漏掉index.html就是离线白屏 -
activate阶段清理旧缓存前，先过滤出当前有效缓存名，避免误删正在用的 cache 导致 Request failed - 别在
install里用fetch('/index.html').then(r => r.text())动态读 HTML——跨域或 no-cors 响应无法读 body，SW 安装直接失败
最常被忽略的是：HTML 自身缓存策略和服务端响应头不匹配，加上 SW 缓存名没变、index.html 没进 cache.addAll()，三者叠在一起，用户就永远卡在旧版本里，连报错都看不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
