如何透過程式碼分割提高 React 應用程式的效能-js教程-PHP中文網

How to Improve the Performance of Your React App with Code Splitting

隨著 React 應用程式的大小和複雜性不斷增加，其 JavaScript 套件的大小會顯著影響效能，尤其是在較慢的網路或裝置上。緩解此問題的一種有效方法是透過程式碼拆分，這是一種將應用程式分解為更小的區塊的技術。這些區塊按需加載，減少了初始加載時間並提高了整體效能。

在本文中，我們將探討什麼是程式碼分割、為什麼它很重要，以及如何在 React 應用程式中有效地實現它。

什麼是程式碼分割？
程式碼分割是一種用於將 JavaScript 程式碼分割成更小的套件的策略，這些套件可以在需要時動態載入。程式碼分割允許您僅發送使用者互動立即需要的程式碼部分，而不是向瀏覽器提供一個大型 JavaScript 檔案。這減少了應用程式的初始載入時間。

React 使用動態導入和 Webpack 等工具來實現程式碼分割。

程式碼分割的好處

減少初始載入時間：僅預先載入關鍵程式碼。
提高效能：較小的套件載入速度更快，尤其是在慢速網路上。
高效率的資源使用：根據需要載入資源，最大限度地減少未使用的程式碼。
更好的使用者體驗：使用者體驗與您的應用程式更快的互動。
在 React 中實作程式碼分割

1。使用 React 的 React.lazy 和 Suspense
React 提供了 React.lazy 來延遲載入元件，並提供 Suspense 來在取得延遲載入的元件時顯示後備 UI。

這是一個例子：
第 1 步：延遲載入組件

import React, { Suspense } from 'react';

// Lazy load the component
const LazyLoadedComponent = React.lazy(() => import('./LazyLoadedComponent'));

function App() {
  return (
    <div>
      <h1>React Code Splitting Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyLoadedComponent />
      </Suspense>
    </div>
  );
}

export default App;

登入後複製

說明：

React.lazy(() => import('./LazyLoadedComponent'))：僅在需要時動態導入元件。
載入中...;}>：在載入元件時顯示後備 UI（例如，載入微調器）。

2。依路由分割代碼
對於較大的應用程序，按路由拆分代碼是提高效能的最有效方法之一。像 React Router 這樣的函式庫使這個過程變得無縫。

第 1 步：安裝 React Router

import React, { Suspense } from 'react';

// Lazy load the component
const LazyLoadedComponent = React.lazy(() => import('./LazyLoadedComponent'));

function App() {
  return (
    <div>
      <h1>React Code Splitting Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyLoadedComponent />
      </Suspense>
    </div>
  );
}

export default App;

登入後複製

第 2 步：使用路由實現程式碼分割

npm install react-router-dom

登入後複製

好處：

僅載入活動路由的 JavaScript。
減小初始包的大小。

3。使用 Webpack 的動態導入
如果您使用 Webpack 作為模組打包器，它支援開箱即用的動態導入。 Webpack 將程式碼分割成可以動態載入的區塊。

以下是如何在 React 應用程式中使用它：

範例：

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

// Lazy load components for routes
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...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

登入後複製

工作原理：

Webpack 為 HeavyComponent 建立一個單獨的區塊。
僅當呼叫 loadComponent() 時才會載入該區塊。

4。使用 Webpack 套件分析器分析您的套件
在實施程式碼分割之前，必須先了解是什麼影響了包的大小。 Webpack 提供了一個名為 Bundle Analyzer 的工具來視覺化套件的內容。

第 1 步：安裝 Webpack Bundle 分析器

function loadComponent() {
  import('./HeavyComponent')
    .then((module) => {
      const Component = module.default;
      // Use the component here
    })
    .catch((error) => {
      console.error('Error loading the component:', error);
    });
}

登入後複製

第 2 步：設定 Webpack
將外掛程式新增至您的 Webpack 設定中：

npm install --save-dev webpack-bundle-analyzer

登入後複製

第 3 步：分析您的套裝

運行建置命令來產生報表：

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

登入後複製

分析器將顯示一個樹狀圖，顯示每個模組的大小，幫助您識別最佳化機會。

5。使用第三方函式庫進行程式碼分割
大型第三方函式庫（例如 lodash、moment.js）可能會使您的套件大小膨脹。您可以將這些庫拆分為單獨的區塊，或使用 tree-shaking 刪除庫中未使用的部分。

範例：庫的動態導入

npm run build

登入後複製

搖樹範例：
而不是導入整個庫：

import('lodash')
  .then((_) => {
    const uniq = _.uniq([1, 2, 2, 3]);
    console.log(uniq);
  })
  .catch((error) => {
    console.error('Error loading lodash:', error);
  });

登入後複製

程式碼分割的最佳實務