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. 配合 浏览器缓存，重复访问时会更快