React lazy 與 Suspense 介紹

在現代前端網頁開發中，效能與使用者體驗是極度重要的考量。React 為了讓應用程式能夠更有效率地載入各種元件，提供了 lazy 和 Suspense 這兩個非常實用的工具。本文將介紹它們的用途、原理以及最佳實踐。

---

什麼是 lazy？

lazy 是 React 16.6 之後新增的 API，可以用來動態載入元件（Component）。透過 lazy，我們可以讓某些元件只在「需要時」才被下載與執行，而不是一開始就全部載入。這種「按需載入」（Code Splitting）能明顯減少初始頁面的 bundle 大小，提升網站的載入速度與效能。

基本語法

import { lazy } from "react";

const MyComponent = lazy(() => import("./MyComponent"));

這段程式碼的意思是：只有當 <MyComponent /> 被真正渲染時，./MyComponent 的程式碼才會被下載。

---

什麼是 Suspense？

Suspense 是 React 提供的另一個元件，專門用來包裹動態載入的 lazy 元件，並處理尚未載入完成時的 UI 狀態。簡單來說，Suspense 可以顯示一個「載入中」的畫面，直到 lazy 元件載入完成。

基本語法

import { Suspense, lazy } from "react";

const MyComponent = lazy(() => import("./MyComponent"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

在上述範例中，當 MyComponent 還在下載過程時，畫面會先顯示 Loading...，等 MyComponent 載入完畢後才會顯示實際內容。

---

lazy 與 Suspense 的關係

• lazy 讓你可以動態載入元件，但它本身無法處理元件載入期間的 UI。

• Suspense 則是專門用來「包裹」 lazy 載入的元件，提供 fallback UI（通常是 loading 畫面）。

• 兩者必須搭配使用，否則 lazy 載入的元件在還沒載入完成時會報錯。

---

使用場景

• 路由頁面切換：用於大型 SPA 的不同頁面，只有點擊對應路由時才載入該頁面的元件。

• 某些次要功能元件：如彈窗、進階設定等不常用的元件。

• 第三方大型元件或函式庫：如圖表、地圖等。

---

實務建議

1. 所有透過 lazy 載入的元件都必須被 Suspense 包裹。

2. fallback 屬性可以放置任何 JSX 內容，例如 loading spinner、骨架屏等等。

3. Suspense 也可以多層嵌套，對不同區塊分別給予不同的載入提示。

4. 可以搭配 ErrorBoundary 使用，處理載入失敗的情境。

---

總結

React 的 lazy 與 Suspense 是提升大型專案效能不可或缺的工具。只要善用這一組 API，就可以有效實現「按需載入」，減少初始包體積，並改善使用者體驗。未來 React 還會持續強化 Suspense 的功能，讓非同步 UI 開發更簡單、更強大。

---