六、性能优化

6.1 按需引入详解
按需引入是 Arco Design 性能优化的核心手段，可以从打包体积中移除未使用的组件代码。

通过 babel-plugin-import 实现自动按需引入

npm install babel-plugin-import -D

// babel.config.js
module.exports = {
  plugins: [
    ['import', {
      libraryName: '@arco-design/web-react',
      libraryDirectory: 'es',
      camel2DashComponentName: false,
      style: true,   // 自动加载样式
    }],
  ],
};

配置完成后，编写代码时只需：

import { Button, Input, Table } from '@arco-design/web-react';
// 插件会自动转换为：
// import Button from '@arco-design/web-react/es/button';
// import '@arco-design/web-react/es/button/style';
// import Input from '@arco-design/web-react/es/input';
// ...

从实际项目中验证优化效果

手动按需引入

如果不使用 babel 插件，也可以手动按需引入：

// ✅ 手动按需引入
import Button from '@arco-design/web-react/es/button';
import '@arco-design/web-react/es/button/style';

import Input from '@arco-design/web-react/es/input';
import '@arco-design/web-react/es/input/style';

6.2 图标按需引入优化
Arco Design 提供了独立的图标包 @arco-design/web-react/icon，包含超过 2000 个图标。全量引入图标库会显著增加打包体积。

// ❌ 错误：会引入所有图标
import * as Icons from '@arco-design/web-react/icon';

// ✅ 正确：只引入需要的图标
import { IconHome, IconUser, IconSettings } from '@arco-design/web-react/icon';

图标按需引入的打包效果对比：

使用动态图标的场景优化

当图标名称是动态的时，可以使用图标映射表：

// 预定义图标映射表
const iconMap = {
  home: IconHome,
  user: IconUser,
  settings: IconSettings,
  delete: IconDelete,
};

// 动态获取图标组件
const getIcon = (iconName) => {
  return iconMap[iconName] || IconDefault;
};

// 使用
const DynamicIcon = getIcon('home');
<DynamicIcon />

6.3 路由懒加载与代码分割
结合 React Router 可以实现组件级别的懒加载：

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Spin } from '@arco-design/web-react';

// 懒加载页面组件
const Dashboard = lazy(() => import('./pages/Dashboard'));
const UserList = lazy(() => import('./pages/UserList'));
const OrderList = lazy(() => import('./pages/OrderList'));
const Settings = lazy(() => import('./pages/Settings'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<Spin tip="加载中..." style={
  { marginTop: 100 }} />}>
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/users" element={<UserList />} />
          <Route path="/orders" element={<OrderList />} />
          <Route path="/settings" element={<Settings />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

使用 Webpack 魔法注释自定义 chunk 名称：

const Dashboard = lazy(() => import(/* webpackChunkName: "dashboard" */ './pages/Dashboard'));
const UserList = lazy(() => import(/* webpackChunkName: "users" */ './pages/UserList'));

6.4 表格组件性能优化
对于大数据量表格，Arco Design 的 Table 组件提供了虚拟滚动（Virtual Scroll）功能，可以显著提升渲染性能。

import { Table } from '@arco-design/web-react';

// 生成大量测试数据
const generateLargeData = () => {
  const data = [];
  for (let i = 0; i < 10000; i++) {
    data.push({
      key: i,
      name: `用户 ${i}`,
      age: 20 + (i % 50),
      address: `地址 ${i}`,
      email: `user${i}@example.com`,
    });
  }
  return data;
};

const columns = [
  { title: '姓名', dataIndex: 'name', width: 120, fixed: 'left' },
  { title: '年龄', dataIndex: 'age', width: 80 },
  { title: '地址', dataIndex: 'address', width: 200 },
  { title: '邮箱', dataIndex: 'email', width: 200, fixed: 'right' },
];

const VirtualTableDemo = () => {
  const data = generateLargeData();

  return (
    <Table
      columns={columns}
      data={data}
      virtualized
      scroll={
  { y: 500, x: 800 }}
      pagination={false}
      border
    />
  );
};

虚拟滚动的性能优势：

6.5 Tree Shaking 优化原理
Arco Design 使用 ES Modules 格式导出，支持 Webpack、Rollup、Vite 等构建工具的 Tree Shaking。确保以下几点以获得最佳优化效果：
使用 ES Module 引入方式：

// ✅ 好的做法
import { Button } from '@arco-design/web-react';

// ❌ 不好的做法（会阻止 Tree Shaking）
import Arco from '@arco-design/web-react';
const { Button } = Arco;

确保 sideEffects 配置正确：

// package.json 中确保 sideEffects 配置包含样式文件
{
  "sideEffects": [
    "*.css",
    "*.less"
  ]
}

使用 Webpack Bundle Analyzer 分析打包结果：

npm install webpack-bundle-analyzer -D

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

6.6 使用 React.memo 减少不必要的重渲染
对于频繁渲染的组件，使用 React.memo 可以避免不必要的重渲染：

import { memo } from 'react';
import { Card, Button } from '@arco-design/web-react';

const UserCard = memo(({ user, onEdit }) => {
  console.log('UserCard rendered:', user.id);
  return (
    <Card>
      <div>姓名：{user.name}</div>
      <div>年龄：{user.age}</div>
      <Button onClick={() => onEdit(user.id)}>编辑</Button>
    </Card>
  );
});

6.7 使用 useMemo / useCallback 缓存计算结果

import { useMemo, useCallback, useState } from 'react';
import { Table, Input } from '@arco-design/web-react';

function UserList({ users }) {
  const [keyword, setKeyword] = useState('');

  // 缓存过滤后的用户列表
  const filteredUsers = useMemo(() => {
    if (!keyword) return users;
    return users.filter(user => 
      user.name.includes(keyword) || user.email.includes(keyword)
    );
  }, [users, keyword]);

  // 缓存事件处理函数
  const handleSearch = useCallback((value) => {
    setKeyword(value);
  }, []);

  return (
    <>
      <Input.Search onSearch={handleSearch} placeholder="搜索用户" />
      <Table data={filteredUsers} columns={columns} />
    </>
  );
}

6.8 性能监控与调试
在 React 18+ 中，使用 React DevTools 的 Profiler 可以分析组件渲染性能：

import { Profiler } from 'react';

function onRenderCallback(
  id,           // 这次提交的 Profiler 树的 id
  phase,        // "mount" 或 "update"
  actualDuration, // 本次更新渲染耗时
) {
  console.log(`${id} 渲染耗时: ${actualDuration}ms`);
}

function App() {
  return (
    <Profiler id="UserList" onRender={onRenderCallback}>
      <UserList />
    </Profiler>
  );
}

来源：
https://wkmsa.cn/