[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