[react] React 使用 Lazy 與 Suspense 動態載入 Component

當我們使用 React 開發網站時，一進入到網站，React 就會將我們所有用到的 Component 給載入進來。

舉例來說，我們現在有三個 Component，分別是：Home、Items、About。

App.jsx
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import "./App.css";

import Navbar from "./component/Navbar";
import Home from "./component/Home";
import Items from "./component/Items";
import About from "./component/About";

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/items" element={<Items />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

在 Network 的部分也可以看到這三個 Component 被載入。

Lazy & Suspense

如果我們網站 Component 非常多，有些 Component 可能使用者不會常去使用到，但使用者進到網站時一樣會載入該 Component，這時候就可以使用 lazy 和 suspense 來達到動態載入 Component 的功能，也就是在必要的時候才去讀取該 Component。

這邊將 Items 與 About Component 使用 lazy 動態載入的方式做處理。

App.jsx
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import "./App.css";
import Navbar from "./component/Navbar";
import Home from "./component/Home";
import { lazy, Suspense } from "react";

const Items = lazy(() => import("./component/Items"));
const About = lazy(() => import("./component/About"));

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
        <Suspense fallback={<h1>Loading...</h1>}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/items" element={<Items />} />
            <Route path="/about" element={<About />} />
          </Routes>
        </Suspense>
      </Router>
    </div>
  );
}

export default App;

這時候可以發現，一開始載入時，Items 和 About 並沒有載入。

Images

當我們進到 Items 和 About 頁面時，才會將這兩個 Component 載入。

Images

Lazy & Suspense​

Lazy & Suspense