Select 组件解耦 tree/grid 重构方案

[kagol]

Select 组件重构背景

Select 组件的现状和问题：

• Select 组件中耦合了 Tree / Grid 两个重型组件，分别对应下拉树和下拉表格两个特性，render-type="tree" | "grid"
• 下拉树和下拉表格并不是常态，普通的下拉列表才是常态，这就导致了大量只使用Select简单功能的业务包体积也很大，影响业务性能
• 依赖了 Select 的组件，比如 Area，间接地等于依赖了 Select / Grid / Tree，导致包体积变大
• 本来应该依赖基于 Select 组件的组件，比如 Pager，由于 Select 耦合了 tree/grid，因此只能自己实现一个 Select，造成重复代码

我们使用 Vite 创建一个空的 Vue 项目，对比下不同情况下构建产物体积情况：

	产物体积(css+js, 单位kB)	gzip之后的产物体积(单位kB)
不引入TinyVue组件	56	23
只引入Select组件	1777	424
只引入Tree组件	789	190
只引入Grid组件	1217	302
只引入Button	310	91
只引入Area组件(依赖Select)	1783	425

不引入TinyVue组件/只引入Select组件/只引入Tree组件的产物体积对比：

只使用 Area 组件（依赖了Select组件）的产物体积：

可以看到：

• 只引入 Select 组件，产物里面却同时包含了 tree/grid 两个组件，导致产物体积很大
• Area 组件本身只是一个很简单的组件，由于引入了 Select，导致产物体积也非常大

因此为了优化 Select 组件性能，减小包体积，有必要对其进行重构，但又不能引入破坏性变更，以免影响到现有的使用了 Select 组件的业务。

重构目标

本次重构主要达成以下目标：

1. 从 Select 组件中剥离 Tree / Grid 组件，让业务在单引Select组件时不再包含 tree/grid 两个重型组件
2. 减少业务单引Select组件(包括TinyVue组件中依赖了Select的组件)时的包体积，优化性能
3. 重构完不能引起破坏性变更，不能影响现有业务

重构方案

为了达成以上目标，我们设计了以下重构方案：

1. 开发一个新组件 BaseSelect，这个组件和 Select 组件的api和功能完全一致，只是移除了 tree/grid 相关api和功能
2. BaseSelect 组件增加panel插槽，并设计好panel与reference的沟通机制，让用户可以在panel插槽放置任意内容，包括tree/grid等组件，从而实现下拉树、下拉表格等功能
3. 基于 BaseSelect 封装 TreeSelect 组件，实现下拉树组件
4. 基于 BaseSelect 封装 GridSelect 组件，实现下拉表格组件
5. 重构 Select，移除原有的 tree/grid 功能，基于 BaseSelect / TreeSeelct / GridSelect 组件进行封装，全新的 Select 组件api和功能与原来的Select组件一模一样，不影响用户使用

业务性能优化

使用了 Select 组件的业务，如果想要优化性能，可以：

• 只需要Select基本功能的业务，可以通过全局替换 tiny-select 为 tiny-base-select 来实现性能优化
• 使用了Select组件下拉树功能的业务，可以通过全局替换 tiny-select 为 tiny-tree-select 来实现性能优化
• 使用了Select组件下拉表格功能的业务，可以通过全局替换 tiny-select 为 tiny-grid-select 来实现性能优化
• 如果业务同时使用了下拉树和下拉表格功能，则可以继续使用 Select 组件，不作任何修改