IT技术 - React.lazy 和预取组件 - 吾爱随笔录

我有一个 2 步应用程序流程，如下所示：

const Step1 = React.lazy(() => import('./Step1'));
const Step1 = React.lazy(() => import('./Step2'));

<Suspense fallback={<Loading />}>
  <Route path="/step1" render={() => <Step1 />} />
  <Route path="/step2" render={() => <Step2 />} />
</Suspense>

使用 React.lazy，我可以<Step2 />在用户打开时延迟加载<Step1 />，这可以改善初始页面加载。但是，我想<Step2 />在用户开启时预取<Step1 />作为优化。是否有使用 React.lazy 执行此操作的 API？

编辑：

详细说明 - 我正在使用路由器来呈现两步表单。最初，用户将从开始/step1。在用户完成<Step1 />他们中的所有任务后，他们将被路由到 path /step2。此时路由器将渲染<Step2 />组件。

我在问是否有一种模式可以<Step2 />在用户仍在使用时预取<Step1 />。

function lazyWithPreload(factory) { const Component = React.lazy(factory); Component.preload = factory; return Component; } const ComponentToPreload = lazyWithPreload(() => import("./Component")); /* usage in Component */ ComponentToPreload.preload(); // this will trigger network request to load the component