React按需加载如何解决 Uncaught (in promise) Error: Loading chunk {n} 的问题

一般情况下单页面应用为了加速首屏加载速度都会做按需加载:

import React, { lazy } from 'react';
//...
component: lazy(() => import("./path/componentName"))),
//...

这样做会在两种情况下报 Uncaught (in promise) ChunkLoadError: Loading chunk {n} failed 这个错误。

1、用户处于弱网环境。

2、用户在发版前一刻打开了首页、发版完成后用户点击了其他页面。

解决方案：

如果是第一种情况采用重新加载（重新import()）就好了。

如何实现重试import()操作呢? 你只要你知道import()的返回值是一个Promise实例就可以做了。 可以在import()函数外用一个返回Promise实例的函数retry包裹它并捕捉import()发生的错误，当错误发生时，重新调用retry，如果没有错误发生则resolve。

function retry(fn:(...rest:any[])=>Promise<any>,retriesTimes = 5, interval = 1000): Promise<any>{
    return new Prmise((resolve,reject)=>{
        fn()
        .then(resolve)
        .catch((error:any)=>{
            setTimeout(()=>{
                if(retriesTimes === 0){
                    reject(error);
                    return;
                }
                retry(fn,retriesTimes - 1, interval).then(resolve,reject);
            })
        })
    })
}

在5次重试后仍然不行可以加上跳转到一个404页面或者提示用户手动刷新的逻辑。

用起来像这样：

import { lazy } from 'react';

lazy(() => retry(() => import("./path/componentName""))),

如果是第二种情况建议重定向到一个错误页面，或者使用window.relaod(true)。