Vue2+Webpack4项目组件懒加载出现ChunkLoadError如何解决？

解决方案 #

1. 针对三类错误的针对性处理 #

• JS运行错误/请求超时类：这两类基本由用户侧网络波动、CDN节点临时故障导致，最直接的方案是加自动重试逻辑，你可以封装通用的懒加载重试函数，示例代码如下：

// 封装懒加载重试方法，默认重试3次，间隔1s
const lazyLoad = (importFunc, retries = 3, delay = 1000) => {
  return new Promise((resolve, reject) => {
    importFunc()
      .then(resolve)
      .catch((err) => {
        if (retries > 0) {
          setTimeout(() => {
            lazyLoad(importFunc, retries - 1, delay)
              .then(resolve)
              .catch(reject)
          }, delay)
        } else {
          reject(err)
        }
      })
  })
}

// 组件引入时替换原有写法
const comp = () => lazyLoad(() => import(/* webpackChunkName: "SimpleMainIndex" */ '~/components/mainIndex/index.vue'))
const res = await comp().default

• JS资源缺失类：这类基本是部署时旧版本chunk被删除，用户浏览器仍缓存旧入口html，请求已不存在的旧chunk导致，解决方案如下：
  • 部署时不要删除旧版本chunk资源，至少保留7-14天的历史chunk，给用户浏览器缓存更新留缓冲时间
  • 给静态资源配置超长缓存，同时每次构建给入口html配置Cache-Control: no-cache，保证用户能拿到最新的入口文件，不会请求到已下线的旧chunk
  • 如果确实需要清理旧资源，可以捕获到missing类型的ChunkLoadError时，自动刷新页面拉取最新的入口文件：

// 全局捕获ChunkLoadError处理
window.addEventListener('error', (e) => {
  if (e.message.includes('ChunkLoadError') && e.message.includes('missing')) {
    // 加标识避免循环刷新
    if (!sessionStorage.getItem('hasReloadForChunkError')) {
      sessionStorage.setItem('hasReloadForChunkError', '1')
      window.location.reload(true) // 强制刷新，不走本地缓存
    }
  }
})

2. webpack配置层面优化 #

你使用的是webpack4，可以调整以下配置降低错误率：

• 调整chunk加载超时时间，默认超时时间较短，百万级PV需要兼容弱网用户：

// webpack.config.js
module.exports = {
  // 其他配置
  output: {
    // 其他output配置
    chunkLoadTimeout: 30000, // 改为30s超时，默认是12000即12s
  }
}

• 如果chunk拆分不合理，单个chunk体积过大也容易导致超时，建议用SplitChunksPlugin进一步拆分公共依赖，降低单个chunk的体积。

3. 用户侧兜底优化 #

如果重试和刷新都失败，可给用户显示兜底错误提示，比如“当前网络不稳定，请刷新页面重试”，避免页面直接白屏：

<!-- 异步组件加载错误兜底示例 -->
<template>
  <component :is="comp" v-if="!loadError" />
  <div v-else class="error-tip">当前页面加载失败，请刷新重试</div>
</template>
<script>
export default {
  data() {
    return {
      comp: null,
      loadError: false
    }
  },
  async mounted() {
    try {
      const comp = () => lazyLoad(() => import(/* webpackChunkName: "SimpleMainIndex" */ '~/components/mainIndex/index.vue'))
      this.comp = (await comp()).default
    } catch (e) {
      this.loadError = true
    }
  }
}
</script>

以上方案落地后基本可将ChunkLoadError的错误率降到0.1%以下，千万级PV的Vue2+webpack4项目实测优化效果明显。

内容的提问来源于stack exchange，提问作者lsustc