React.lazy 和预取组件

Question

我有一个 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 />。

Answer 1

几天前我也在阅读有关这方面的内容，我喜欢这种方法：

增强React.lazy具有可用于加载组件的回调。像这样的东西：

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

通过这种方式，您可以在任何地方预加载组件。就像在click事件上或在当前组件安装之后一样。

必须阅读原帖：https : //medium.com/hackernoon/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d

如果您正在使用react-loadable. 你可以检查一下：https : //github.com/jamiebuilds/react-loadable#preloading

希望这可以帮助！