使用 React.lazy 和 Suspense 分割程式碼

您絕不需要向使用者傳送超出必要的程式碼，因此請分割套件，確保絕不會發生這種情況！

Houssein Djirdeh

Jeff Posnick

React.lazy 方法可讓您使用動態匯入功能，輕鬆在元件層級程式碼分割 React 應用程式。

import React, { lazy } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const DetailsComponent = () => (
  <div>
    <AvatarComponent />
  </div>
)

這種報表有哪些優點？

大型 React 應用程式通常包含許多元件、公用程式方法和第三方程式庫。如果沒有在需要時才載入應用程式的不同部分，系統會在使用者載入第一頁時，將單一的大型 JavaScript 套件傳送給他們。這可能會大幅影響網頁效能。

React.lazy 函式提供內建方式，可將應用程式中的元件分成不同的 JavaScript 區塊，幾乎不需要額外作業。然後，您可以將其與 Suspense 元件配對，處理載入狀態。

Suspense (懸疑)

向使用者傳送大量 JavaScript 酬載的問題在於，網頁完成載入所需的時間會很長，尤其是在效能較弱的裝置和網路連線中。因此，程式碼分割和延遲載入非常實用。

不過，透過網路擷取程式碼分割元件時，使用者一定會遇到些許延遲，因此請務必顯示實用的載入狀態。使用 React.lazy 元件搭配 Suspense 即可解決這個問題。

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const renderLoader = () => <p>Loading</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
  </Suspense>
)

Suspense 接受 fallback 元件，可讓您將任何 React 元件顯示為載入狀態。以下範例說明運作方式。 只有在點選按鈕時，系統才會算繪虛擬人偶，並發出要求，擷取暫停 AvatarComponent 所需的程式碼。在此期間，系統會顯示備用載入元件。

這裡的 AvatarComponent 程式碼很小，因此載入微調器只會顯示一小段時間。較大的元件可能需要較長時間載入，尤其是在網路連線不穩定的情況下。

為進一步說明運作方式，請參考以下範例：

• 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示 。
• 按下 `Control+Shift+J` 鍵 (在 Mac 上為 `Command+Option+J` 鍵) 開啟開發人員工具。
• 按一下 [網路] 分頁標籤。
• 按一下「節流」下拉式選單 (預設為「不節流」)，選取「快速 3G」。
• 按一下應用程式中的「Click Me」按鈕。

載入指標現在會顯示較長時間。請注意，構成 AvatarComponent 的所有程式碼都會以個別區塊的形式擷取。

暫停多個元件

Suspense 的另一項功能是可讓您暫停載入多個元件，即使這些元件都是延遲載入也沒問題。

例如：

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));
const InfoComponent = lazy(() => import('./InfoComponent'));
const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'