antd 全局样式污染问题，慎用

[liuqiongyu889]

之前做了个网站hackertalk，在 v2 发了帖子很多人关注。

最近把前端代码优化下，剔除了全部 antd 依赖，发现 css 体积减少 24.2%，javascript 体积减少 7.8%

antd 的样式全局污染有点严重，引入少数组件就吃掉大量静态文件体积了。

[xieqiqiang00]

antd 就是这样的

[DrakeXiang]

antd 组件样式可以按需引入的吧，你是不是把全部都弄进去了

[yyfearth]

很多 UI 库都有这样的问题 最严重的其实就是 Bootstrap
而且现在大部分前端 CSS 库或者组件 都依赖一些 css normalize 或者 reset
然后还可能互相冲突

@DrakeXiang 全引入确实会非常大 但是就算是按需引入 里面有个 common 其实也挺大的
不过这个不是 AntD 独有的问题 大部分基于 CSS 的组件库都有类似的问题

[Leviathann]

我用了个 ant design mobile 的组件，光是他用 lodash 的就吃了我几十 k 的体积

[dcsuibian]

antdv 的官方问答：
是的，ant-design-vue 在设计的时候就是用来开发一个完整的应用的，为了方便，我们覆盖了一些全局样式，现在还不能移除，想要了解更多请追踪这个 issue： https://github.com/ant-design/ant-design/issues/4331 ，或者参考这个教程 How to avoid modifying global styles?


其实我觉得没啥问题，这东西是做中后台的，用的人多，做公司项目我多半会用它。
但个人项目风格不一致，肯定不会用它。

[Yvette]

https://www.npmjs.com/package/babel-plugin-import

[pengtdyd]

有个问题做中后台的有必要这么在意样式问题吗，又不是 toC

[lodisy]

radix + 自己写 css

[masterclock]

用 antd 我会在乎文件大小吗？[手动滑稽]

[liuqiongyu889]

@DrakeXiang 肯定是按需引入啊，不然 css 体积不得炸裂

[okampfer]

@lodisy #8 这样从头搞一套组件库需要多少时间？

[okampfer]

@liuqiongyu889 那你移除 antd 后换成了什么呢？

[liuqiongyu889]

@okampfer 自己写，或者找开源小颗粒度的方案，比如 select 使用 react-select 等，这些体积都很小，甚至可以自己看源码自己写一个。

[cwliang]

如果能轻松移除，说明本身就不需要 antd

[lamCJ]

私以为 antd 做论坛这些不是很合适。antd 定位 PC 中后台，而中后台不怎么纠结全局污染基本一个后台系统就只用一套 UI ，而 js/css 大小大头又在业务逻辑。

如果真有和其他 UI 框架冲突的情况，建议建立几个 layout ，在 layout 里面引入 antd 这些 UI 框架，views 再引入各自的 layout ，而不是在应用入口 js 文件里面全局引入。

[wenzichel]

是的，本来我博客自己有一套样式，评论系统单独用 react+antd 编写的，只要一加载 antd 的样式，我博客自己的样式就变了

[ybz]

轻度前端开发，最近试了 mui ，再也不想碰 antd 了

[guzzhao]

@ybz mui 的 css 好用吗,我看他用的 cssinjs 库

[beginor]

网站、论坛类的应用只需要 bootstrap 之类的轻量级样式库就够了， 不必使用 antd ，antd 的目标是后台管理系统