Are there plans to optimize the packaged volume?

[izhouteng]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

相比其他流行的 UI 库，ant-design-vue 打包后的体积远比其他库大得多，同时打包速度也慢很多，有考虑优化打包体积吗？

What does the proposed API look like?

下面是使用不同 UI 库，编写相同页面之后打包测试结果。

可以发现 ant-design-vue 比其他 UI 库打包多耗费了近1分钟，同时打包后的体积也是其他 UI 库的近2倍。

==================== ant-design-vue ====================
vite v2.9.13 building for production...
✓ 2513 modules transformed.
dist/index.html 0.36 KiB
dist/assets/index.15eccdb8.js 81.47 KiB / gzip: 32.43 KiB
dist/assets/LoginView.f2b0cc92.css 210.64 KiB / gzip: 22.38 KiB
dist/assets/LoginView.e84b718f.js 203.11 KiB / gzip: 65.00 KiB

real 1m24.549s
user 0m0.092s
sys 0m0.277s

==================== arco-design-vue ====================
vite v2.9.13 building for production...
✓ 629 modules transformed.
dist/index.html 0.36 KiB
dist/assets/LoginView.1fecec3e.css 92.18 KiB / gzip: 12.25 KiB
dist/assets/LoginView.fc5faecb.js 61.72 KiB / gzip: 17.39 KiB
dist/assets/index.d2108c94.js 80.57 KiB / gzip: 32.02 KiB

real 0m14.216s
user 0m0.122s
sys 0m0.386s

==================== element-plus ====================
vite v2.9.13 building for production...
✓ 1354 modules transformed.
dist/index.html 0.36 KiB
dist/assets/LoginView.54b391e8.css 39.66 KiB / gzip: 5.66 KiB
dist/assets/LoginView.8bda7ac4.js 82.54 KiB / gzip: 28.48 KiB
dist/assets/index.8be8a17b.js 82.43 KiB / gzip: 32.83 KiB

real 0m22.356s
user 0m0.091s
sys 0m0.292s

==================== naive-ui ====================
vite v2.9.13 building for production...
✓ 2986 modules transformed.
dist/index.html 0.36 KiB
dist/assets/LoginView.54b391e8.css 39.66 KiB / gzip: 5.66 KiB
dist/assets/LoginView.8bda7ac4.js 82.54 KiB / gzip: 28.48 KiB
dist/assets/index.8be8a17b.js 82.43 KiB / gzip: 32.83 KiB

real 0m37.786s
user 0m0.122s
sys 0m0.340s

[tangjinzhou]

打包优化是业务工程去做的，组件不会做，也做不了，
查看是否正确配置按需加载

[izhouteng]

肯定是按需加载的，不然体积直接1M多了。。
光引入个Button体积都有上百KB。。我感觉不太正常啊。。

[izhouteng]

@tangjinzhou 然后关于打包时间过长，我发现个有意思的情况。

使用 unplugin-vue-components/vite 插件的话，它似乎实际上是以这种方式引入的：

import { Button, Input } from 'ant-design-vue';
import 'ant-design-vue/es/button/style/index.css'
import 'ant-design-vue/es/input/style/index.css'

这么引入实际上引入了整个组件库，然后rollup需要一通分析。。进行tree shaking，造成了大量时间浪费，像这样：

vite v2.9.13 building for production...
✓ 2508 modules transformed.
dist/index.html                      0.36 KiB
dist/assets/LoginView.b733e440.css   101.16 KiB / gzip: 9.92 KiB
dist/assets/index.05a771fb.js        81.50 KiB / gzip: 32.42 KiB
dist/assets/LoginView.e130a62b.js    128.98 KiB / gzip: 40.55 KiB

real    1m2.495s
user    0m0.060s
sys     0m0.307s

转换了2500多个模块，耗费了1分多种。

但，如果改成手动引入的形式：

import Button from 'ant-design-vue/es/button'
import Input from 'ant-design-vue/es/input'
import 'ant-design-vue/es/button/style/index.css'
import 'ant-design-vue/es/input/style/index.css'
app.use(Button)
app.use(Input)

立马可以将打包模块降到170个，时间缩短到8秒。

vite v2.9.13 building for production...
✓ 171 modules transformed.
dist/index.html                     0.42 KiB
dist/assets/LoginView.ca720397.js   0.35 KiB / gzip: 0.26 KiB
dist/assets/index.ec902363.css      58.82 KiB / gzip: 5.67 KiB
dist/assets/index.d13e5dd7.js       210.74 KiB / gzip: 72.64 KiB

real    0m8.901s
user    0m0.060s
sys     0m0.246s

[izhouteng]

我发现另一个库 vite-plugin-imp 可以转换成下面的导入方式。
import { Button, Input } from 'ant-design-vue';
↓↓↓
import Button from 'ant-design-vue/es/button'
import Input from 'ant-design-vue/es/input'
并自动导入样式，同样能实现按需导入，但它打包速度更快，仅需9s。

vite v2.9.13 building for production...
✓ 174 modules transformed.
dist/index.html                     0.42 KiB
dist/assets/LoginView.05a75cc5.js   0.35 KiB / gzip: 0.26 KiB
dist/assets/index.307f3571.css      103.16 KiB / gzip: 9.91 KiB
dist/assets/index.62d4a3b3.js       210.74 KiB / gzip: 72.88 KiB

real    0m9.769s
user    0m0.107s
sys     0m0.294s

[tangjinzhou]

可以考虑给 unplugin-vue-components/vite 提 pr，或者把这个优化点提给插件作者，如果合理，这个作者应该会实现

另外，vite-plugin-imp使用人数较少，暂时不考虑作为官方推荐插件

[tangjinzhou]

c739e49
应该和这个有关

[izhouteng]

c739e49 应该和这个有关

是的，有关。

对于模块数量很多的库，使用解构导入会严重拖慢性能。

比较常见的坑就是：图标库、lodash等工具库。

比如像：@ant-design/icons-vue

使用结构导入的话，Vite（rollup）打包时会将所有图标全部处理一遍，非常耗时。

import { CloseOutlined, PlusOutlined } from '@ant-design/icons-vue'

若改成这种形式，虽然不优雅，但可以让 rollup 跳过没用到的图标，提高打包速度：

import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'

不过源码中只改这几处是没用的。 ant-design-vue 中还有很多地方都是结构导入，只要有一处是解构导入，那么依然会处理所有图标。

还有一个常见的坑就是 lodash 等工具库，尽量不要解构导入 lodash（包括lodash-es）。

antd 源码中这块做的很好，项目中所有图标、lodash 全部是非解构导入。偶尔有人不小心用了解构导入还会特地提PR修正。

另外关于不优雅的问题，其实有Babel插件可以做到打包时（打包es目录时）自动转换成非解构导入。

import { DownOutlined } from '@ant-design/icons-vue'
↓↓↓
import DownOutlined from '@ant-design/icons-vue/DownOutlined'

[izhouteng]

UI库层面，需要做的优化大致就是上面提到的，剩下的优化，还需用户去做。这个无解。也和 ant-design-vue 无关。

比如，下面的写法 rollup 将在打包时，处理整个ant-design-vue库，非常耗时。

import { Button } from 'ant-design-vue'

若改成这种，就是只处理 Button 相关的文件，打包神速：

import Button from 'ant-design-vue/es/button'

然后，使用 vite-plugin-imp 插件可以自动转换结构导入成非结构导入（支持灵活配置，什么库都支持）。

但是，注意！！！。

只能让 vite-plugin-imp 在打包阶段启用（vite可以配置插件在什么阶段启用）

如果在开发阶段也启用的话，那么你每引入一个组件，Vite 都会重新预构建整个项目的依赖（可能动辄几分钟）

为什么会这样？

因为在 Vite 看来，这些都是不同的库，而不是一个库：
'ant-design-vue/es/button'
'ant-design-vue/es/'input'
'ant-design-vue/es/'card'

所以每引入一个新组件，相当于项目依赖发生变化，Vite会重新构建整个项目的依赖。

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.