使用 React.lazy 進行程式碼分割：增強應用程式的效能-js教程-PHP中文網

使用 React.lazy 進行程式碼分割：增強應用程式的效能

Susan Sarandon

發布： 2024-12-23 07:40:44

原創

735 人瀏覽過

Code Splitting with React.lazy: Enhance Your App’s Performance

在 React 中使用 React.lazy 進行程式碼分割

程式碼分割是一種透過將 JavaScript 套件分解為更小的區塊來最佳化 React 應用程式效能的技術。 React 提供了 React.lazy 作為在元件層級實現程式碼拆分的內建方式。這允許您根據需要動態載入應用程式的各個部分。

程式碼分割如何與 React.lazy 一起工作

動態導入：使用ES6 import()動態載入元件。
較小的捆綁包：將應用程式分解為較小的捆綁包，從而減少初始載入時間。
非同步載入：僅在需要時非同步載入元件。

句法

const LazyComponent = React.lazy(() => import('./LazyComponent'));

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

登入後複製

React.lazy：動態匯入指定元件。
Suspense：在載入元件時提供後備 UI。

範例 1：使用 React.lazy 進行基本程式碼分割

沒有程式碼分割

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

登入後複製

在這種方法中，整個 HeavyComponent 都與主應用程式捆綁在一起，即使它不是立即需要的。

使用程式碼分割

import React, { Suspense } from "react";

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

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

export default App;

登入後複製

現在，HeavyComponent 僅在渲染時才載入。這減少了初始包的大小。

範例 2：路由中的程式碼分割

程式碼分割與 React Router 無縫協作，動態載入路由元件。

import React, { Suspense } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

const Home = React.lazy(() => import("./Home"));
const About = React.lazy(() => import("./About"));
const Contact = React.lazy(() => import("./Contact"));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading Page...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

登入後複製

好處：

每個路由元件（Home、About、Contact）僅在存取對應路由時載入。

範例 3：延遲載入多個元件

透過邏輯拆分在單一應用程式中延遲載入多個元件。

import React, { Suspense, useState } from "react";

const ComponentA = React.lazy(() => import("./ComponentA"));
const ComponentB = React.lazy(() => import("./ComponentB"));

function App() {
  const [showA, setShowA] = useState(false);
  const [showB, setShowB] = useState(false);

  return (
    <div>
      <button onClick={() => setShowA(true)}>Load Component A</button>
      <button onClick={() => setShowB(true)}>Load Component B</button>

      <Suspense fallback={<div>Loading...</div>}>
        {showA && <ComponentA />}
        {showB && <ComponentB />}
      </Suspense>
    </div>
  );
}

export default App;

登入後複製

使用 React.lazy 進行錯誤處理

React 不提供針對失敗匯入的內建錯誤處理。您可以使用錯誤邊界來處理此類情況。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

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

登入後複製