React.lazy 和预取组件

Question

我有一个如下所示的两步应用程序流程：

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，我可以在用户使用 <Step1 /> 时延迟加载 <Step2 />，这可以改善初始页面加载。但是，我想在用户处于 <Step1 /> 时预取 <Step2 /> 作为优化。是否有一个 API 可以用 React.lazy 来做到这一点？

编辑：

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

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

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 事件中或在当前组件已安装之后点赞。

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

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

希望对您有所帮助！

React.lazy 和预取组件

React.lazy and prefetching components

reactjs

code-splitting