react代碼分割的三種實(shí)現(xiàn)方法
更新時(shí)間：2025年09月01日 10:02:33 作者：光影少年
React代碼分割主要是為了優(yōu)化首屏加載速度,避免一次性加載整個(gè)應(yīng)用,把代碼拆分成多個(gè)bundle,按需加載,下面就一起來了解一下,感興趣的可以了解一下
React 代碼分割（Code Splitting）主要是為了 優(yōu)化首屏加載速度，避免一次性加載整個(gè)應(yīng)用，把代碼拆分成多個(gè) bundle，按需加載。常見的方式有三種：
1. 使用React.lazy+Suspense（推薦方式）
適合組件級(jí)別的代碼分割。
import React, { Suspense } from "react";
// 按需加載組件
const PerformanceReport = React.lazy(() => import("./pages/PerformanceReport"));
function App() {
return (
<div>
<h1>云鑒性能平臺(tái)</h1>
<Suspense fallback={<div>Loading...</div>}>
<PerformanceReport />
</Suspense>
</div>
);
}
export default App;
React.lazy：實(shí)現(xiàn)組件的懶加載Suspense：加載時(shí)的兜底 UI（比如 Loading 動(dòng)畫）
2. 路由級(jí)別代碼分割（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
- 進(jìn)入對(duì)應(yīng)頁面時(shí)再動(dòng)態(tài)加載該頁面的 JS
3.動(dòng)態(tài) import（webpack 原生支持）
適合某些 工具類模塊 或 特定場景的函數(shù)，避免一開始全量加載。
async function loadExcelExport() {
const { exportToExcel } = await import("./utils/excelExport");
exportToExcel();
}
4. 更高級(jí)的代碼分割工具
- Loadable Components：更靈活的懶加載方案，支持 SSR。
- Webpack SplitChunksPlugin：拆分公共代碼，比如
react,lodash。 - Vite/Rollup：天然支持動(dòng)態(tài) import，自動(dòng)分割 bundle。
?? 建議實(shí)踐：
- 路由層做大塊分割（每個(gè)頁面一個(gè) bundle）
- 工具函數(shù)/圖表庫按需 import（避免首頁加載太大）
- 配合 瀏覽器緩存，重復(fù)訪問時(shí)會(huì)更快
到此這篇關(guān)于react代碼分割的三種實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)react代碼分割內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
深入理解React調(diào)度(Scheduler)原理
本文主要介紹了深入理解React調(diào)度(Scheduler)原理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
SOLID?是一套原則，它們主要是關(guān)心代碼質(zhì)量和可維護(hù)性的軟件專業(yè)人員的指導(dǎo)方針，本文給大家分享如何在React中應(yīng)用SOLID原則，感興趣的朋友一起看看吧2022-07-07
這篇文章主要介紹了React如何自定義輪播圖Carousel組件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
使用Ant Design Anchor組件的一個(gè)坑及解決
這篇文章主要介紹了使用Ant Design Anchor組件的一個(gè)坑及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
本篇文章主要介紹了探究react-native 源碼的圖片緩存問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了React反向代理及樣式獨(dú)立詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-08-08
本篇文章主要介紹了ReactNative列表ListView的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
React Native 是目前流行的跨平臺(tái)移動(dòng)應(yīng)用開發(fā)框架之一。本文介紹react native環(huán)境安裝流程及遇到問題解決方法，感興趣的朋友一起看看吧2021-05-05
減少react組件不必要的重新渲染實(shí)現(xiàn)方法
這篇文章主要為大家介紹了減少react組件不必要的重新渲染實(shí)現(xiàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
一篇文章介紹redux、react-redux、redux-saga總結(jié)
這篇文章主要介紹了一篇文章介紹redux、react-redux、redux-saga總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05