从Element Plus到OpenTiny：我用一周把后台管理系统重构了一遍，体积小了40%

公司的后台管理系统用的是 Element Plus，一直没什么问题。直到有一天测试说"这个页面加载要 8 秒"。

我一看，好家伙，Element Plus 完整引入 + ECharts + moment.js，首屏 JS 体积直奔 2MB。用户用的还是 4G 网络。

于是决定换成 OpenTiny。一周搞定，效果出乎意料。

为什么选 OpenTiny

OpenTiny 是华为开源的前端组件库，主打企业级场景。跟 Element Plus 比：

	Element Plus	OpenTiny
组件数量	70+	80+
按需引入包体积	~400KB	~240KB
Tree Shaking	支持	原生支持
主题定制	CSS变量	CSS变量+Design Token
企业级场景	通用	内置审批流、表格增强

对我最有吸引力的三点：

体积更小（树摇更彻底）
表格组件更强（企业后台核心）
内置了 Element Plus 没有的高级组件

迁移过程

第1天：替换依赖

bash 复制代码

npm uninstall element-plus
npm install @opentiny/vue

第2-3天：组件替换

大部分组件是 API 兼容的：

vue 复制代码

<!-- Element Plus -->
<el-table :data="list">
  <el-table-column prop="name" label="名称" />
</el-table>

<!-- OpenTiny -->
<tiny-table :data="list">
  <tiny-table-column prop="name" label="名称" />
</tiny-table>

花了 3 天把 40 多个页面过了一遍。改得最多的是自定义样式那部分，因为 OpenTiny 的 CSS 变量命名不太一样。

第4天：TinyGrid 替换表格

这是这次迁移的杀手锏。OpenTiny 的 TinyGrid 跟普通表格不是一个东西：

vue 复制代码

<tiny-grid :data="list" :columns="columns"
  :filter-config="filterConfig"
  :pager-config="pagerConfig"
  @filter-change="handleFilter"
  @page-change="handlePage">
</tiny-grid>

一个组件搞定：表格渲染、筛选、分页、排序、导出。以前要组合 5 个组件的事，现在一个就够了。

第5-7天：调样式 + 测试

主题定制用 Design Token：

scss 复制代码

:root {
  --ti-base-color-primary: #5e7ce0;
  --ti-table-header-bg-color: #f5f7fa;
}

改几个变量就统一了全站主题，比 Element Plus 的 SCSS 覆盖方便太多。

成果

指标	迁移前	迁移后
首屏JS体积	1.8MB	1.1MB (-39%)
首页加载时间	8.2s	3.1s (-62%)
Lighthouse分数	42	78
表格页代码行数	~200行	~80行

踩坑

Dropdown 和 Popover API 差异大 --- 这两个组件接口不兼容，手动适配了一下午
Form 校验规则格式不同 --- OpenTiny 用的是 async-validator 但字段名有变化
Icon 组件需要单独引入 --- 不像 Element Plus 全局注册那么方便

写在最后

如果你的后台系统也在为体积和性能发愁，OpenTiny 值得一试。尤其表格密集的管理后台，TinyGrid 能省不少代码。

不需要一把梭全迁移，可以先从体积最大的页面开始切。一周差不多能搞定一个中等规模的系统。

本文参加「OpenTiny NEXT 前端智能化系列直播征文活动」