react代码分割

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。

---

📌 建议实践：

1. 路由层做大块分割（每个页面一个 bundle）

2. 工具函数/图表库按需 import（避免首页加载太大）

3. 配合 浏览器缓存，重复访问时会更快

---