Lazy chunk 失败：在 React 18.2.0 中恢复/重新加载失败的 split chunk，并使用延迟反应和悬念

Question

我已经将我的代码迁移到了 React 18.2.0 中。我正在使用

1. 使用悬念和惰性进行代码分割。
2. 单页应用程序

分割块加载完美，快乐流程正在工作。下面是代码

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

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

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

因为块已失败，所以我们显示了带有重试按钮的后备 UI。点击重试按钮后，需要再次下载该块。

我调用了 Index 函数，认为 React 会重试下载块，React-loadable 也发生了同样的情况，但 LoginPageM 存储了失败的惰性组件。再次悬念说LoginPageM加载失败而不是重新加载。

Answer 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。