缘由
当你开心的打开网站时, 突然报错 提示 loading chunk ? failed, 然后刷新浏览器又好了。体验极差
原因
- 项目中使用了文件懒加载
- 已经打开的项目的会记录懒加载对应的chunk id
- chunkFileName 使用了 contanthash 或者 id 之类的
- 重新部署代码清空之前的文件
所以此时,用户如果已经打开了网页,然后点击了命中了懒加载的文件,并且这个文件的filename跟之前的还不同,就会出现 loading chunk ? failed的情况
解决方案
方案一:
每次部署都不清空之前的文件,或者只保留最近的10次文件;缺点需要保留上次文件,分布式不适用
方案二:
多版本部署,前端会根据对应的版本访问对应的服务器;缺点成本高
方案三:
固定chunkName, 固定chunkId, 固定moduleId;需要牺牲一定缓存策略
{
output: {
chunkFilename: [name].js
}
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.NamedChunksPlugin()
]
}