微信里打开的 H5 页面仍执行旧 JavaScript,先确认客户端拿到了哪一个文件。旧项目中,电脑刷新能看到更新,手机仍保留旧行为;退出再登录后恢复。但这个结果只能说明当时状态发生了变化,不能单独证明缓存究竟位于微信、浏览器还是中间节点。
对比行为之前,先对比资源
一次部署可能同时经过 HTML、静态资源服务器、CDN 和客户端缓存。HTML 如果仍引用旧文件,即使 JavaScript 文件服务器已经更新,页面行为也不会随之改变。
可沿请求链检查:
- HTML 中引用的脚本 URL 是否属于本次构建。
- 实际响应内容或文件摘要是否与部署产物一致。
- Cache-Control、ETag、Last-Modified、Age 等响应信息。
- 请求是否返回 304,以及是否使用了预期的缓存版本。
- 页面若有 Service Worker,是否还存在另一层缓存与更新策略。
这些是排查入口,不是每个旧项目都使用了全部组件。304 表示复用验证后的已有表示,不等于“服务器根本没收到请求”。HTTP 缓存说明
用构建版本区分资源
例如生成带内容摘要的文件名:
<script src="/assets/app.a1b2c3.js" defer></script>
这里文件名仅作结构示意,必须与真实构建产物对应。内容更新时产生新 URL,HTML 随部署引用新文件;不能只在页面上改一个版本号,却没有发布相应资源。
通常可以对内容寻址的静态资源安排较长缓存,对入口 HTML 安排能及时检查更新的策略。具体缓存头应结合部署方式决定,不要直接对所有路径套同一个长 max-age。
刷新不是唯一的修复目标
用户退出微信、清理全部数据或反复刷新,只适合有限的对照观察,不应成为每次版本发布的使用说明。更稳妥的结果是:新入口能引用一致版本,旧页面能在合理时机更新,失败时也不会拿到一半新一半旧的资源。
如果现象只涉及支付后返回页状态,应优先重新读取业务状态,而不是全站清缓存,见支付后返回页面。资源版本与订单状态属于不同问题。