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

相关推荐
合作小小程序员小小店4 小时前
web渗透PHP反序列化漏洞
前端·网络协议·web安全·网络安全·安全威胁分析
再学一点就睡10 小时前
初探 React Router:为手写路由筑牢基础
前端·react.js
悟空聊架构10 小时前
5 分钟上手!Burp 插件「瞎越」一键批量挖垂直越权
前端
炒毛豆11 小时前
vue3+antd实现华为云OBS文件拖拽上传详解
开发语言·前端·javascript
Pu_Nine_911 小时前
Axios 实例配置指南
前端·笔记·typescript·axios
红尘客栈211 小时前
Shell 编程入门指南:从基础到实战2
前端·chrome
前端大卫12 小时前
Vue 和 React 受控组件的区别!
前端
Hy行者勇哥12 小时前
前端代码结构详解
前端
练习时长一年13 小时前
Spring代理的特点
java·前端·spring
水星记_13 小时前
时间轴组件开发:实现灵活的时间范围选择
前端·vue