詳解React如何實現(xiàn)代碼分割Code Splitting

更新時間：2023年08月06日 14:34:40 作者：dapan

這篇文章主要為大家介紹了React如何實現(xiàn)代碼分割Code Splitting示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

React 如何實現(xiàn)代碼分割（Code Splitting）

什么是代碼分割

代碼分割是一種將代碼分割成多個小塊的方式，然后按需加載或并行加載所需的塊的技術(shù)。代碼分割可以用于減少應(yīng)用程序的初始加載時間或?qū)⒋a切割成可按需加載的塊，從而減少應(yīng)用程序所需的總體代碼量。

為什么要使用代碼分割

在大型應(yīng)用程序中，將所有代碼放在一個文件中會導(dǎo)致應(yīng)用程序加載時間過長，影響用戶體驗。為了解決這個問題，我們需要將代碼分割成小塊，然后按需加載或并行加載所需的塊。

代碼分割的方式

1. 動態(tài)導(dǎo)入 import

import()是 JavaScript 中的一個動態(tài)導(dǎo)入語法，它允許在運行時異步加載模塊。它返回一個 Promise，該 Promise 在模塊加載完成后被解析為一個包含導(dǎo)出內(nèi)容的模塊對象。

使用 import()的語法如下：

import(modulePath)
  .then((module) => {
    // 使用導(dǎo)入的模塊
  })
  .catch((error) => {
    // 處理錯誤
  });

在這個語法中，modulePath 是一個字符串，用于指定要加載的模塊路徑。它可以是相對路徑或絕對路徑，也可以是一個包名。

當(dāng)調(diào)用 import(modulePath)時，它會返回一個 Promise。這個 Promise 會在模塊加載完成后被解析為一個包含導(dǎo)出內(nèi)容的模塊對象。你可以使用.then()方法來處理解析后的模塊對象，并在其中使用導(dǎo)入的模塊。

如果模塊加載失敗，Promise 會被拒絕，并觸發(fā).catch()方法中的錯誤處理邏輯。

::: warning 注意事項
import()只能在模塊的頂層作用域中使用，不能在函數(shù)內(nèi)部或條件語句中使用。這是因為 import()是靜態(tài)解析的，它在代碼加載時就會執(zhí)行，而不是在運行時。
:::

另外，import()可以與其他語法結(jié)合使用，例如動態(tài)模塊路徑和對象解構(gòu)。
動態(tài)模塊路徑：

const modulePath = "./myModule";
import(modulePath)
  .then((module) => {
    // 使用導(dǎo)入的模塊
  })
  .catch((error) => {
    // 處理錯誤
  });

在這個示例中，modulePath 是一個變量，它的值在運行時確定。這樣可以根據(jù)需要動態(tài)加載不同的模塊。

對象解構(gòu)：

import("./myModule")
  .then(({ myFunction, myVariable }) => {
    // 使用導(dǎo)入的函數(shù)和變量
    myFunction();
    console.log(myVariable);
  })
  .catch((error) => {
    // 處理錯誤
  });

2. React.lazy

React.lazy 是 React 16.6 版本引入的一個特性，它可以讓你以動態(tài)的方式進(jìn)行代碼拆分（code splitting）。通過 React.lazy，你可以延遲加載（lazy load）一個組件，只有在需要時才會加載該組件，從而提高應(yīng)用程序的性能。
React.lazy 的用法如下：

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

在這個例子中，MyComponent 是一個需要延遲加載的組件。import('./MyComponent')返回一個 Promise，該 Promise 在模塊加載完成后會被解析為一個包含 MyComponent 的模塊對象。React.lazy 接受一個函數(shù)作為參數(shù)，該函數(shù)返回一個動態(tài)導(dǎo)入的 Promise。當(dāng)組件需要被渲染時，React.lazy 會自動加載該組件。
在使用 React.lazy 時，你還可以結(jié)合使用 Suspense 組件來處理加載狀態(tài)。Suspense 組件可以包裹在延遲加載的組件周圍，以便在組件加載期間顯示一個回退（fallback）UI。
下面是一個使用 React.lazy 和 Suspense 的示例：

import React, { Suspense } from "react";
const MyComponent = React.lazy(() => import("./MyComponent"));
function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}
export default App;

在這個示例中，MyComponent 是一個需要延遲加載的組件。當(dāng) MyComponent 被渲染時，Suspense 組件會顯示一個加載中的 UI（在這個例子中是一個簡單的文本"Loading..."）。一旦 MyComponent 加載完成，它將被渲染到頁面上。
使用 React.lazy 和 Suspense 可以幫助你更好地管理和優(yōu)化你的 React 應(yīng)用程序的性能，特別是在處理大型代碼庫時。

::: warning 注意事項
React.lazy 只能用于默認(rèn)導(dǎo)出的組件。如果你的組件使用了命名導(dǎo)出，你需要使用對象解構(gòu)語法來導(dǎo)入特定的命名導(dǎo)出。
:::

const { MyComponent, AnotherComponent } = React.lazy(() =>
  import("./MyComponent")
);

這樣，你就可以按需加載具有命名導(dǎo)出的組件。

3.路由（React Router）代碼分割

React.lazy 和 Suspense 可以幫助你在組件級別上進(jìn)行代碼分割，但如果你想在路由級別上進(jìn)行代碼分割，你可以使用 React Router 的動態(tài)導(dǎo)入語法。

下面是一個結(jié)合 React.lazy 和 React Router 的示例：

import React, { lazy, Suspense } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));
const Contact = lazy(() => import("./Contact"));
function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">首頁</Link>
            </li>
            <li>
              <Link to="/about">關(guān)于</Link>
            </li>
            <li>
              <Link to="/contact">聯(lián)系方式</Link>
            </li>
          </ul>
        </nav>
        <Suspense fallback={<div>加載中...</div>}>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/contact" component={Contact} />
          </Switch>
        </Suspense>
      </div>
    </Router>
  );
}
export default App;

在上面的例子中，我們將Home、About和Contact三個組件使用React.lazy進(jìn)行了按需加載，然后通過React Router的Route組件將它們與特定的路由路徑綁定起來。

注意，在使用React.lazy時，您需要將懶加載的組件包裹在Suspense組件中。div組件用于在加載過程中展示一個占位符（在上面的例子中是<div>加載中...</div>），直到實際組件加載完成才會顯示實際內(nèi)容。