Webpack Loading Chunk Failed 解决方案

310 阅读1分钟

缘由

当你开心的打开网站时, 突然报错 提示 loading chunk ? failed, 然后刷新浏览器又好了。体验极差

原因

  1. 项目中使用了文件懒加载
  2. 已经打开的项目的会记录懒加载对应的chunk id
  3. chunkFileName 使用了 contanthash 或者 id 之类的
  4. 重新部署代码清空之前的文件

所以此时,用户如果已经打开了网页,然后点击了命中了懒加载的文件,并且这个文件的filename跟之前的还不同,就会出现 loading chunk ? failed的情况

解决方案

方案一:

每次部署都不清空之前的文件,或者只保留最近的10次文件;缺点需要保留上次文件,分布式不适用

方案二:

多版本部署,前端会根据对应的版本访问对应的服务器;缺点成本高

方案三:

固定chunkName, 固定chunkId, 固定moduleId;需要牺牲一定缓存策略

{
    output: {
        chunkFilename: [name].js
    }
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.NamedChunksPlugin()
    ]
}

参考: