izhouteng
izhouteng
动画位置问题，刚发现在 `rc-dialog` 仓库中，半个月前就有人提了 [PR](https://github.com/react-component/dialog/pull/292) fix 了，不过还没被合并...... 一堆 rc-* 仓库，似乎维护起来有些麻烦...... 为什么当初没有采用 Monorepo 的方案....？ 这样大伙修 bug 也更方便点。也依然可以发不同的包到 npm。 @afc163
import Button from 'antd/button'; 这种不觉得啰嗦吗？一大堆import。。 直接解构啊。。多简洁
关于你说的这个问题，我深表理解。 题主之所以不喜欢 `import { Button } from 'antd'` 的语法，一个重要的原因，是因为这样 `tree shaking` 体验很差。 在 `Vite` 中，像上面这样简写的解构导入，会在打包时让 `Rollup` 去分析整个 `antd` 包，从而极大的拖慢打包速度。 若改成 `import Button from 'antd/es/button'`，则打包速度可以飞跃提升。 但这种写法，实在是很啰嗦，好在，有一个插件 `vite-plugin-imp`，可以帮我们自动转换这种写法，并自动引入样式。 其实它就是 `babel-plugin-import` 的 `Vite`...
肯定是按需加载的，不然体积直接1M多了。。 光引入个Button体积都有上百KB。。我感觉不太正常啊。。
@tangjinzhou 然后关于打包时间过长，我发现个有意思的情况。 使用 `unplugin-vue-components/vite` 插件的话，它似乎实际上是以这种方式引入的： ```js 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....
我发现另一个库 `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....
> [c739e49](https://github.com/vueComponent/ant-design-vue/commit/c739e498c5be9fdd35161b3c4b21d1343c978a99) 应该和这个有关 是的，有关。 对于模块数量很多的库，使用解构导入会严重拖慢性能。 比较常见的坑就是：图标库、lodash等工具库。 比如像：`@ant-design/icons-vue` 使用结构导入的话，Vite（rollup）打包时会将所有图标全部处理一遍，非常耗时。 ```js import { CloseOutlined, PlusOutlined } from '@ant-design/icons-vue' ``` 若改成这种形式，虽然不优雅，但可以让 rollup 跳过没用到的图标，提高打包速度： ```js import CloseOutlined from '@ant-design/icons-vue/CloseOutlined' ``` 不过源码中只改这几处是没用的。 `ant-design-vue` 中还有很多地方都是结构导入，只要有一处是解构导入，那么依然会处理所有图标。 还有一个常见的坑就是...
UI库层面，需要做的优化大致就是上面提到的，剩下的优化，还需用户去做。这个无解。也和 `ant-design-vue` 无关。 比如，下面的写法 rollup 将在打包时，处理整个`ant-design-vue`库，非常耗时。 ```js import { Button } from 'ant-design-vue' ``` 若改成这种，就是只处理 `Button` 相关的文件，打包神速： ```js import Button from 'ant-design-vue/es/button' ``` 然后，使用 `vite-plugin-imp` 插件可以自动转换结构导入成非结构导入（支持灵活配置，什么库都支持）。 **但是，注意！！！。** 只能让 `vite-plugin-imp` 在打包阶段启用（vite可以配置插件在什么阶段启用）...
这个问题原因是 `rc-dialog` 中 `onEnterPrepare` 函数里 `offset` 没有取到 `left` 和 `top` 参数，导致没有计算出 `transformOrigin`。 原因是打开 Modal 的时候 `.rc-dialog-wrap` 元素上的 `display: none` 没有立即去掉，导致 `el.getBoundingClientRect()` 获取的值都是 `0`。 改成 `useLayoutEffect` 后，的确可以让 `setAnimatedVisible(true)` 快点生效，从而让 `display: none`...