【问题标题】：Split chunk Failed with react lazy and suspense in react 18.2.0拆分块在反应 18.2.0 中因反应惰性和悬念而失败
【发布时间】：2022-06-17 19:01:03
【问题描述】：

我已在 react 18.2.0 中迁移了我的代码。我正在使用

使用 suspense 和 lazy 进行代码拆分。

单页应用

完美加载拆分块，快乐流程正在运行。下面是代码

let LoginPageM = React.lazy(() => import('./LoginPageM' /* webpackChunkName: 'LoginPageM' */));

const Index = ({ isSSR, ...props }) => {
  return (
    <React.Suspense fallback={<LoaderUI />}>
      <LoginPageM isSSR={isSSR} {...props} />
    </React.Suspense>
  );
};

问题： 但是，如果由于网络缓慢或用户离线而导致块加载失败怎么办。

点击重试按钮，需要重新下载块

我重试下载块并调用索引函数。我以为 react 会重试下载块，react-loadable 也发生了同样的事情，但是 LoginPageM 存储了失败的惰性组件。又是在说LoginPageM加载失败而不是重新加载了。

【问题讨论】：

标签： lazy-loading code-splitting react-suspense react-lazy-load react-18

【解决方案1】：

是的，这是 React Suspense 和懒惰的问题。

但是你可以通过检查 react 惰性组件的状态来解决这个问题。

const refresh = () => React.lazy(() => import('./LoginPageM' /* webpackChunkName: 'LoginPageM' */));

let LoginPageM = refresh();

const Index = ({ isSSR, ...props }) => {
  if (LoginPageM._payload._status === 2) { LoginPageM = refresh(); }
  return (
    <React.Suspense fallback={<LoaderUI />}>
      <LoginPageM isSSR={isSSR} {...props} />
    </React.Suspense>
  );
};

现在，当您重试加载 Index 函数时，它会检查延迟加载组件的状态。如果状态为 2，您可以再次延迟加载相同的组件并分配回 LoginPageM。

【讨论】：