react代碼分割的三種實現(xiàn)方法
更新時間：2025年09月01日 10:02:33 作者：光影少年
React代碼分割主要是為了優(yōu)化首屏加載速度,避免一次性加載整個應(yīng)用,把代碼拆分成多個bundle,按需加載,下面就一起來了解一下,感興趣的可以了解一下
React 代碼分割（Code Splitting）主要是為了 優(yōu)化首屏加載速度，避免一次性加載整個應(yīng)用，把代碼拆分成多個 bundle，按需加載。常見的方式有三種：
1. 使用React.lazy+Suspense（推薦方式）
適合組件級別的代碼分割。
import React, { Suspense } from "react";
// 按需加載組件
const PerformanceReport = React.lazy(() => import("./pages/PerformanceReport"));
function App() {
return (
<div>
<h1>云鑒性能平臺</h1>
<Suspense fallback={<div>Loading...</div>}>
<PerformanceReport />
</Suspense>
</div>
);
}
export default App;
React.lazy：實現(xiàn)組件的懶加載Suspense：加載時的兜底 UI（比如 Loading 動畫）
2. 路由級別代碼分割（React Router）
如果你用 react-router-dom，可以結(jié)合 React.lazy 在路由層做代碼分割。
import React, { Suspense } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
const PerformanceQuery = React.lazy(() => import("./pages/PerformanceQuery"));
const PerformanceReport = React.lazy(() => import("./pages/PerformanceReport"));
function AppRouter() {
return (
<Router>
<Suspense fallback={<div>頁面加載中...</div>}>
<Routes>
<Route path="/query" element={<PerformanceQuery />} />
<Route path="/report" element={<PerformanceReport />} />
</Routes>
</Suspense>
</Router>
);
}
export default AppRouter;
?? 常見做法：
- 首頁加載最少的 bundle
- 進入對應(yīng)頁面時再動態(tài)加載該頁面的 JS
3.動態(tài) import（webpack 原生支持）
適合某些 工具類模塊 或 特定場景的函數(shù)，避免一開始全量加載。
async function loadExcelExport() {
const { exportToExcel } = await import("./utils/excelExport");
exportToExcel();
}
4. 更高級的代碼分割工具
- Loadable Components：更靈活的懶加載方案，支持 SSR。
- Webpack SplitChunksPlugin：拆分公共代碼，比如
react,lodash。 - Vite/Rollup：天然支持動態(tài) import，自動分割 bundle。
?? 建議實踐：
- 路由層做大塊分割（每個頁面一個 bundle）
- 工具函數(shù)/圖表庫按需 import（避免首頁加載太大）
- 配合 瀏覽器緩存，重復(fù)訪問時會更快
到此這篇關(guān)于react代碼分割的三種實現(xiàn)方法的文章就介紹到這了,更多相關(guān)react代碼分割內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了淺談React中組件間抽象,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
React-Native TextInput組件詳解及實例代碼
這篇文章主要介紹了React-Native TextInput組件詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
在?Vue?中,插槽（Slots）允許父組件向子組件傳遞?HTML?結(jié)構(gòu),從而實現(xiàn)更靈活的組件復(fù)用,具名插槽允許父組件向子組件傳遞多個不同的?HTML?結(jié)構(gòu),在?React?中,我們沒有直接的插槽概念,但可以通過?props.children?和函數(shù)作為?props?來實現(xiàn)類似的功能2025-01-01
詳解React開發(fā)中使用require.ensure()按需加載ES6組件
本篇文章主要介紹了詳解React開發(fā)中使用require.ensure()按需加載ES6組件，非常具有實用價值，需要的朋友可以參考下2017-05-05
本文主要介紹了用React創(chuàng)建登錄表單,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-09-09
這篇文章主要介紹了React函數(shù)組件和類組件的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
React 中淺比較的概念無處不在，它在不同的流程中起著關(guān)鍵的作用，本文主要介紹了React 中的淺比較是如何工作的，具有一定的參考價值，感興趣的可以了解一下2022-04-04
這篇文章主要介紹了React傳值 組件傳值 之間的關(guān)系詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了react-router6.x路由配置及導(dǎo)航,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了React19通用ECharts組件的使用示例,支持餅圖、折線圖和柱狀圖,并且可以自動銷毀實例以避免重復(fù)渲染問題,同時能夠自動響應(yīng)窗口大小變化,下面就來詳細(xì)的介紹一下2026-02-02