React.lazy和预取组件

2024-05-19 • 问答

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

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 />作为优化。是否有API可以通过React.lazy做到这一点？

编辑：

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

我要问的是，当用户仍在<Step />上时是否有一种预取<Step1 />的模式。

asusxiao123 回答：React.lazy和预取组件

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

增强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

希望这会有所帮助！

code-splitting reactjs

本文链接：https://www.f2er.com/3169034.html

React.lazy和预取组件

asusxiao123 回答：React.lazy和预取组件

大家都在问