之前做了个网站hackertalk,在 v2 发了帖子很多人关注。
最近把前端代码优化下,剔除了全部 antd 依赖,发现 css 体积减少 24.2%,javascript 体积减少 7.8%
antd 的样式全局污染有点严重,引入少数组件就吃掉大量静态文件体积了。
1
xieqiqiang00 2022-06-10 23:55:35 +08:00
antd 就是这样的
|
2
DrakeXiang 2022-06-11 01:13:23 +08:00
antd 组件样式可以按需引入的吧,你是不是把全部都弄进去了
|
3
yyfearth 2022-06-11 04:27:53 +08:00
很多 UI 库都有这样的问题 最严重的其实就是 Bootstrap
而且现在大部分前端 CSS 库或者组件 都依赖一些 css normalize 或者 reset 然后还可能互相冲突 @DrakeXiang 全引入确实会非常大 但是就算是按需引入 里面有个 common 其实也挺大的 不过这个不是 AntD 独有的问题 大部分基于 CSS 的组件库都有类似的问题 |
4
Leviathann 2022-06-11 04:56:10 +08:00
我用了个 ant design mobile 的组件,光是他用 lodash 的就吃了我几十 k 的体积
|
5
dcsuibian 2022-06-11 07:03:52 +08:00
antdv 的官方问答:
是的,ant-design-vue 在设计的时候就是用来开发一个完整的应用的,为了方便,我们覆盖了一些全局样式,现在还不能移除,想要了解更多请追踪这个 issue: https://github.com/ant-design/ant-design/issues/4331 ,或者参考这个教程 How to avoid modifying global styles? 其实我觉得没啥问题,这东西是做中后台的,用的人多,做公司项目我多半会用它。 但个人项目风格不一致,肯定不会用它。 |
6
Yvette 2022-06-11 07:22:24 +08:00
|
7
pengtdyd 2022-06-11 07:25:31 +08:00
有个问题做中后台的有必要这么在意样式问题吗,又不是 toC
|
8
lodisy 2022-06-11 08:15:00 +08:00 via Android
radix + 自己写 css
|
9
masterclock 2022-06-11 08:33:30 +08:00
用 antd 我会在乎文件大小吗?[手动滑稽]
|
10
liuqiongyu889 OP @DrakeXiang 肯定是按需引入啊,不然 css 体积不得炸裂
|
12
okampfer 2022-06-11 10:05:25 +08:00
@liuqiongyu889 那你移除 antd 后换成了什么呢?
|
13
liuqiongyu889 OP @okampfer 自己写,或者找开源小颗粒度的方案,比如 select 使用 react-select 等,这些体积都很小,甚至可以自己看源码自己写一个。
|
14
cwliang 2022-06-11 11:13:36 +08:00
如果能轻松移除,说明本身就不需要 antd
|
15
lamCJ 2022-06-11 11:46:26 +08:00
私以为 antd 做论坛这些不是很合适。antd 定位 PC 中后台,而中后台不怎么纠结全局污染基本一个后台系统就只用一套 UI ,而 js/css 大小大头又在业务逻辑。
如果真有和其他 UI 框架冲突的情况,建议建立几个 layout ,在 layout 里面引入 antd 这些 UI 框架,views 再引入各自的 layout ,而不是在应用入口 js 文件里面全局引入。 |
16
wenzichel 2022-06-11 11:57:58 +08:00
是的,本来我博客自己有一套样式,评论系统单独用 react+antd 编写的,只要一加载 antd 的样式,我博客自己的样式就变了
|
17
ybz 2022-06-11 13:14:54 +08:00
轻度前端开发,最近试了 mui ,再也不想碰 antd 了
|
19
beginor 2022-06-11 23:45:34 +08:00
网站、论坛类的应用只需要 bootstrap 之类的轻量级样式库就够了, 不必使用 antd ,antd 的目标是后台管理系统
|