router.onError((e) => {
if (/Loading chunk/.test(e.message)) location.reload()
})
发布十分钟后,还开着旧页面的同事点侧边栏,控制台报 Loading chunk 5 failed,内容区整块空白,刷新一次才好。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。
追下去是这么回事:旧页面的 HTML 里记着上一版的 chunk 文件名,新构建把带 hash 的旧文件删掉了,动态 import 拿到的地址已经不存在。缓存那一层还会继续命中旧清单,问题会拖到用户下次访问。
「Loading chunk failed」排查到最后往往是很小的一处差异,前面那些复杂猜测可以先放一放。同一份配置存在多处的,先确认改的是被加载的那一份。
新版本先放一台机器上跑一天再全量,问题一般在这段时间暴露。备份不是备了就行,恢复一次才算数,很多备份文件打开才发现是空的。
处理上按这个顺序:构建输出保留最近两版,用目录区分,别直接覆盖同一个 assets;路由懒加载加错误处理,捕获到 chunk 加载失败就整页 reload 一次;index.html 设成 no-cache,保证每次拿到的清单是最新的。
确认没问题再收工,旧页面点菜单不再白屏,最多整页刷新一次就进到新版本。
