react代码分割的三种实现方法
作者：光影少年
React代码分割主要是为了优化首屏加载速度,避免一次性加载整个应用,把代码拆分成多个bundle,按需加载,下面就一起来了解一下,感兴趣的可以了解一下
React 代码分割（Code Splitting）主要是为了 优化首屏加载速度，避免一次性加载整个应用，把代码拆分成多个 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：实现组件的懒加载Suspense：加载时的兜底 UI（比如 Loading 动画）
2. 路由级别代码分割（React Router）
如果你用 react-router-dom，可以结合 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
- 进入对应页面时再动态加载该页面的 JS
3.动态 import（webpack 原生支持）
适合某些 工具类模块 或 特定场景的函数，避免一开始全量加载。
async function loadExcelExport() {
const { exportToExcel } = await import("./utils/excelExport");
exportToExcel();
}
4. 更高级的代码分割工具
- Loadable Components：更灵活的懒加载方案，支持 SSR。
- Webpack SplitChunksPlugin：拆分公共代码，比如
react,lodash。 - Vite/Rollup：天然支持动态 import，自动分割 bundle。
📌 建议实践：
- 路由层做大块分割（每个页面一个 bundle）
- 工具函数/图表库按需 import（避免首页加载太大）
- 配合 浏览器缓存，重复访问时会更快
到此这篇关于react代码分割的三种实现方法的文章就介绍到这了,更多相关react代码分割内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！