DevsDawn
DevsDawn

Vue项目ChunkLoadError报错解决

问题信息

近期项目出现大量以下这种类型的报错,显示该js文件找不到,并且用户反馈点击后整个页面卡住,但是刷新页面后就不会再报错:

ChunkLoadError
Loading chunk chunk-9f35075c failed.
(missing: https://***.com/js/chunk-9f35075c.4032e0dc.js)

以及下面这种报错:

SyntaxError
Unexpected token ‘<‘

问题分析

尝试直接访问该链接,也是出现文件不存在的情况,而被伪静态规则转发访问到首页,chunk loader加载后发现不是正确的js文件,报出SyntaxError

该项目发布是使用打docker镜像的形式,而vue每次打包生成的js文件名都会不同,因此在打包部署后,前一次构建的产物自然会无法访问。因此怀疑是用户在打开页面之后刚好碰上了正式环境的更新,导致用户在点击其它页面时就无法加载到对应的chunk文件了

通过对项目构建历史的排查,发现该文件是前几次构建打包中生成的文件,这个文件在线上版本早就不存在了,证实了上面的的猜测。

解决方案

知道了问题所在,可以得出以下解决方案:
1. 增加缓存层,例如CDN等。在CDN侧对js和css设置足够长的缓存时间,保证用户在使用时碰上更新也能够访问到旧的资源,同时要适当降低首页index.html的缓存时间,避免用户访问到旧版。
2. 监听ChunkLoadError,报错时触发刷新页面。
3. 页面增加逻辑,用户使用过长时间、或者检测到版本更新后主动提醒进行刷新。避免网页打开几天甚至更长而不刷新的这种比较极端的用户碰上更新的问题。

若无特别说明,本文采用 CC BY-SA 4.0 协议进行许可。如需转载,请附上本文链接和本声明。
本文链接:https://devsdawn.com/2022/10/solving-vue-project-chunk-load-error/
DigitalOcean云服务,NYSE上市公司,注册即送200USD体验金
Vultr云服务,全球25+地域,注册即送100USD体验金

发表回复

textsms
account_circle
email

DevsDawn

Vue项目ChunkLoadError报错解决
问题信息 近期项目出现大量以下这种类型的报错,显示该js文件找不到,并且用户反馈点击后整个页面卡住,但是刷新页面后就不会再报错: ChunkLoadError Loading chunk chunk-9f3507…
扫描二维码继续阅读
2022-10-29