HTML应禁用强缓存，设Cache-Control: no-cache, must-revalidate；JS/CSS等静态资源需配合内容哈希与max-age=31536000, immutable；路径无哈希则缓存策略无效。
HTML 本身不缓存公共资源——真正起效的是 HTTP 缓存策略 + 资源路径稳定性，二者缺一不可。
Cache-Control 必须按资源类型分层配置
把所有文件（index.html、main.js、style.css）用同一个 Cache-Control 值统一设置，是线上加载异常的高频原因。
-
index.html：动态入口，必须用Cache-Control: no-cache, must-revalidate或private, max-age=0；加public, max-age=3600会导致用户卡在旧 HTML，哪怕 JS 已更新 -
main.[hash].js和style.[hash].css：带内容哈希的静态资源，可放心设为public, max-age=31536000, immutable -
vendor.js（无 hash）或未版本化的第三方库：最多设public, max-age=604800，否则内容变更后浏览器无法感知
资源路径不含哈希 = 缓存策略再严也白搭
很多团队配了 max-age=1y 却仍收到“用户看到旧按钮”的反馈，根本原因是构建产物没启用 content hash。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- Webpack 用户检查
output.filename是否含[contenthash]（不是[hash]） - Vite 默认启用，但若手动覆盖
build.rollupOptions.output.entryFileNames，需确认仍含[hash] - CDN 或 Nginx 反向代理上，不能对
.js后缀一概expires 1y—— 未哈希文件必须单独排除
HTML 内联资源要克制，否则拖垮解析速度
内联 script 或 style 看似省了一次请求，但会阻塞 HTML 解析，尤其在低端设备上更明显。
- 关键 CSS 可内联，但建议控制在
1KB以内；超量请改用<link rel="preload" as="style">+onload注入 - JS 绝对不要内联业务逻辑；埋点类脚本如
sentry.js用async，初始化类脚本用defer - 内联 Base64 图片？仅限
的 icon；大图一律外链并启用 <code>loading="lazy"
Service Worker 不是 HTML 缓存的替代品，而是补充层
它无法绕过 index.html 的 HTTP 缓存限制，反而可能因缓存策略冲突导致白屏。
- SW 的
fetch事件拦截不到被强缓存的index.html—— 浏览器根本不会发请求 - 想实现 HTML 级离线，必须配合
Cache-Control: no-store或短时效 + SW 预缓存 HTML，且每次部署都要更新 SW 版本 - 真实项目中，90% 的“SW 缓存失效”问题，根源是忘记在 SW 更新时清除旧 cacheName
最常被忽略的一点：HTML 缓存时间越长，对 JS/CSS 路径稳定性的要求就越高——一个没加 hash 的 main.js，配上 max-age=1y，等于主动给用户发一张长期作废的入场券。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
