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事件或當前組件已安裝之后一樣。

必須閱讀原帖： https://medium.com/hackernoon/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d

---

如果您使用的是react-loadable 。 你可以檢查這個： https://github.com/jamiebuilds/react-loadable#preloading

希望這可以幫助！