react代码分割

React 代码分割(Code Splitting)主要是为了 优化首屏加载速度,避免一次性加载整个应用,把代码拆分成多个 bundle,按需加载。常见的方式有三种:


1. 使用 React.lazy + Suspense(推荐方式)

适合组件级别的代码分割。

javascript 复制代码
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 在路由层做代码分割。

javascript 复制代码
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 原生支持)

适合某些 工具类模块特定场景的函数,避免一开始全量加载。

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

相关推荐
天蓝色的鱼鱼11 小时前
低代码是“未来”还是“骗局”?前端开发者有话说
前端
答案answer12 小时前
three.js着色器(Shader)实现数字孪生项目中常见的特效
前端·three.js
城管不管12 小时前
SpringBoot与反射
java·开发语言·前端
JackJiang12 小时前
即时通讯安全篇(三):一文读懂常用加解密算法与网络通讯安全
前端
一直_在路上12 小时前
Go架构师实战:玩转缓存,击破医疗IT百万QPS与“三大天灾
前端·面试
早八睡不醒午觉睡不够的程序猿12 小时前
Vue DevTools 调试提示
前端·javascript·vue.js
恋猫de小郭12 小时前
基于 Dart 的 Terminal UI ,pixel_prompt 这个 TUI 库了解下
android·前端·flutter
天天向上102412 小时前
vue el-form 自定义校验, 校验用户名调接口查重
前端·javascript·vue.js
忧郁的蛋~12 小时前
前端实现网页水印防移除的实战方案
前端
喝奶茶的Blair12 小时前
PHP应用-组件框架&前端模版渲染&三方插件&富文本编辑器&CVE审计(2024小迪安全DAY30笔记)
前端·安全·php