為什麼在 React 應用中使用動態匯入進行程式碼分割是必須的

王大冶發表於2024-11-26
React行程
  • CSS技巧與案例詳解
  • vue2與vue3技巧合集
  • VueUse原始碼解讀

如果你已經使用 React 一段時間了，你可能聽過“程式碼分割”和“動態匯入”這些術語，尤其是在最佳化效能時。這些技術可以極大地提高你的 React 應用的速度和效率。本文將深入探討如何利用這些技術讓你的 React 應用如虎添翼。

簡單回顧

在開始之前，我們先快速瞭解一些關鍵概念：打包、程式碼分割 和 動態匯入。

  • 打包（Bundling） 是將你的 React 應用的 JavaScript 檔案合併成一個或幾個大檔案。雖然這簡化了瀏覽器的載入，但也可能導致 包膨脹（bundle bloat），即過多的無用程式碼被提前載入，從而減慢應用啟動速度，尤其是首次載入。
  • 程式碼分割（Code Splitting） 則將你的應用分解為更小、更易管理的塊，動態匯入（Dynamic Imports） 可以按需載入這些塊。與其立即載入整個庫或元件，不如僅在需要時才載入。本文將透過示例展示如何使用這些策略最佳化載入時間和使用者體驗，使你的 React 應用更快、更高效。

庫和模組的匯入最佳化

許多 React 應用中會同時使用本地模組和第三方庫（如 lodash、moment.js 或像 Material-UI 這樣的 UI 元件庫）。當你使用靜態匯入時，無論你只用到一個功能還是整個庫的功能，都會載入整個庫。這會導致 包膨脹，讓初始 JavaScript 檔案變得過大，從而減慢應用的首次渲染速度。

動態匯入 則可以按需載入庫的特定部分。例如，與其預先匯入整個實用函式庫，不如僅在需要時載入特定功能：

import React, { useState } from 'react';

function App() {
  const [data, setData] = useState([20, 10, 30, 50, 40]);

  const sortNumbers = async () => {
    // 動態匯入 Lodash 的 sortBy 函式
    const { sortBy } = await import('lodash');
    const sortedData = sortBy(data);
    setData(sortedData);
  };

  return (
    <div>
      <h1>Numbers: {data.join(', ')}</h1>
      <button onClick={sortNumbers}>Sort Numbers</button>
    </div>
  );
}

export default App;

解釋

  1. 應用啟動時，僅展示一組未排序的數字。
  2. 當點選“Sort Numbers”按鈕時，動態匯入 Lodash 的 sortBy 函式，並使用它對資料陣列排序。
  3. 在按鈕點選之前，Lodash 庫不會被載入，從而保持初始包的體積較小，提升載入速度。

這種方法減少了使用者首次訪問網站時需要下載的程式碼量，從而顯著縮短初始載入時間。

條件元件匯入

在許多應用中，並非所有元件都需要在每個頁面上載入。例如，一個龐大的管理員儀表盤元件在使用者登入頁就沒有必要載入。透過動態匯入，你可以根據使用者操作或特定條件按需載入元件。

以下是一個根據使用者角色動態載入不同皮膚（Admin、Manager 或 User）的示例：

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

// 延遲載入不同使用者的儀表盤
const AdminDashboard = lazy(() => import('./AdminDashboard'));
const ManagerDashboard = lazy(() => import('./ManagerDashboard'));
const UserDashboard = lazy(() => import('./UserDashboard'));

function App() {
  const [userRole, setUserRole] = useState(null);

  const handleLogin = (role) => {
    setUserRole(role);
  };

  const renderDashboard = () => {
    switch (userRole) {
      case 'admin':
        return <AdminDashboard />;
      case 'manager':
        return <ManagerDashboard />;
      case 'user':
        return <UserDashboard />;
      default:
        return <div>Please log in</div>;
    }
  };

  return (
    <div>
      {!userRole ? (
        <div>
          <button onClick={() => handleLogin('admin')}>Login as Admin</button>
          <button onClick={() => handleLogin('manager')}>Login as Manager</button>
          <button onClick={() => handleLogin('user')}>Login as User</button>
        </div>
      ) : (
        <Suspense fallback={<div>Loading Dashboard...</div>}>
          {renderDashboard()}
        </Suspense>
      )}
    </div>
  );
}

export default App;

解釋

  1. 使用者登入時選擇以管理員、經理或普通使用者身份登入。
  2. 根據其角色，動態載入相應的儀表盤（如 AdminDashboard、ManagerDashboard 或 UserDashboard）。
  3. 只有在使用者登入時才載入對應的儀表盤元件，從而保持初始包體積較小，並按需載入相關程式碼。

路由最佳化

React 單頁應用（SPA）通常依賴 react-router-dom 等路由庫在頁面間導航。在典型設定中，所有路由及其關聯元件都會在應用初始化時載入。然而，這會讓初始載入變得不必要地沉重，尤其是在存在多個路由時。

透過動態匯入，可以僅在使用者導航到特定路由時載入相應的元件：

import { lazy } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

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

export default App;

解釋

  1. Home 和 About 元件不會立即載入。
  2. 當使用者導航到對應的路由（如 / 或 /about）時，動態載入這些元件。
  3. 在元件載入過程中，Suspense 顯示一個載入佔位符（如“Loading...”）。元件載入完畢後，載入佔位符會被替換為實際內容。

總結

動態匯入不僅僅是一個“錦上添花”的功能——對於任何現代化的 React 應用來說，它都是實現高效擴充套件的關鍵。透過將程式碼分割為更小的模組塊，你可以顯著提高載入速度，為使用者提供更流暢、更響應迅速的體驗。

希望這篇文章能幫助你更好地理解如何利用動態匯入進行程式碼分割。祝編碼愉快！

首發於公眾號 大遷世界，歡迎關注。📝 每週一篇實用的前端文章 🛠️ 分享值得關注的開發工具 ❓ 有疑問？我來回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章