Loading chunk failed问题处理

最新推荐文章于 2024-03-18 10:39:05 发布

hu_baobao

最新推荐文章于 2024-03-18 10:39:05 发布

阅读量1.9w

点赞数

分类专栏： react 文章标签： javascript webpack 前端 reactjs

本文链接：https://blog.youkuaiyun.com/hu_baobao/article/details/109120687

版权

react 专栏收录该内容

3 篇文章

订阅专栏

当使用懒加载时，由于服务器文件名与浏览器缓存名不匹配，可能导致'Loading chunk failed'错误。通过引入'webpack-retry-chunk-load-plugin'可以防止因网络等问题引发的加载失败，同时利用ErrorBoundary捕获并重新加载来处理此类问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出现该报错主要是因为，用户浏览页面期间，懒加载导致的服务器文件名和浏览器缓存文件名不一致，所以获取不到文件。

解决方式：

1.引入webpack-retry-chunk-load-plugin，避免因为网络或其他问题导致的加载失败

2.错误边界ErrorBoundry捕捉并重新加载

    
//webpack-retry-chunk-load-plugin配置
   let {RetryChunkLoadPlugin} = require('webpack-retry-chunk-load-plugin')
   new RetryChunkLoadPlugin({
      cacheBust: `function() {
        return Date.now();
      }`,
      maxRetries: 2,
    })

import React from 'react'
import { observer, inject } from 'mobx-react'
import Component from 'edt-components/Component'
import { sessionStorage } from 'utils/storage'
import FullLoading from 'edt-components/FullLoading'
import _ from 'lodash'
@observer
class ErrorBoundary extends Component {
  constructor(props) {
    super(props)
    this.data = {
      hasError: false,
      errorType: null
    }
    this.clearLoadingChunk()
  }
  componentDidCatch(error, errorInfo) {
    this.handleError(error, errorInfo)
  }
  clearLoadingChunk = () => {
    window.clearTimeout(this.clearTimer)
    this.clearTimer = window.setTimeout(() => {
      sessionStorage.removeItem('loadingChunk')
    }, 60000)
  }
  handleError = (error, errorInfo) => {
    this.setData({hasError: true})
    this.handleLoadingChunkError(error)
  }
  handleLoadingChunkError = (error, errorInfo) => {
    //页面浏览期间重新发布，会出现浏览器缓存文件名和服务器文件名不一致，导致下载js失败白屏的问题
    const loadFailed = new RegExp(/Loading chunk (\d)+ failed/g)
    if (error && error.message && error.message.match(loadFailed)) {
      this.setData({errorType: ERROR_ENUM.RELOADING})
      let loadingChunk = sessionStorage.getItem('loadingChunk')
      loadingChunk = _.isNumber(loadingChunk) ? loadingChunk + 1 : 1
      if (loadingChunk > 2) {
        this.setData({errorType: ERROR_ENUM.LOAD_FAIL})
        //当前流程结束，重置loadingChunk
        sessionStorage.setItem('loadingChunk', 0)
      } else {
        sessionStorage.setItem('loadingChunk', loadingChunk)
        window.location.reload()
      }
    }
  }
  renderErrorContent = () => {
    const {errorType} = this.data
    if (errorType === ERROR_ENUM.LOAD_FAIL) {
      return (
        <h3>页面加载失败, 请刷新页面重新加载...</h3>
      )
    }
    if (errorType === ERROR_ENUM.RELOADING) {
      return (
        <FullLoading/>
      )
    }
  }
  render() {
    return this.data.hasError ? this.renderErrorContent() : this.props.children
  }
}

//页面错误类型枚举
const ERROR_ENUM = {
  LOAD_FAIL: 'LOAD_FAIL',
  RELOADING: 'RELOADING'
}

export default ErrorBoundary