V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
liuqiongyu889
V2EX  ›  程序员

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

  •  
  •   liuqiongyu889 · 2022-06-10 23:10:38 +08:00 · 5179 次点击
    这是一个创建于 878 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    19 条回复    2022-06-11 23:45:34 +08:00
    xieqiqiang00
        1
    xieqiqiang00  
       2022-06-10 23:55:35 +08:00
    antd 就是这样的
    DrakeXiang
        2
    DrakeXiang  
       2022-06-11 01:13:23 +08:00
    antd 组件样式可以按需引入的吧,你是不是把全部都弄进去了
    yyfearth
        3
    yyfearth  
       2022-06-11 04:27:53 +08:00
    很多 UI 库都有这样的问题 最严重的其实就是 Bootstrap
    而且现在大部分前端 CSS 库或者组件 都依赖一些 css normalize 或者 reset
    然后还可能互相冲突

    @DrakeXiang 全引入确实会非常大 但是就算是按需引入 里面有个 common 其实也挺大的
    不过这个不是 AntD 独有的问题 大部分基于 CSS 的组件库都有类似的问题
    Leviathann
        4
    Leviathann  
       2022-06-11 04:56:10 +08:00
    我用了个 ant design mobile 的组件,光是他用 lodash 的就吃了我几十 k 的体积
    dcsuibian
        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?


    其实我觉得没啥问题,这东西是做中后台的,用的人多,做公司项目我多半会用它。
    但个人项目风格不一致,肯定不会用它。
    Yvette
        6
    Yvette  
       2022-06-11 07:22:24 +08:00
    pengtdyd
        7
    pengtdyd  
       2022-06-11 07:25:31 +08:00
    有个问题做中后台的有必要这么在意样式问题吗,又不是 toC
    lodisy
        8
    lodisy  
       2022-06-11 08:15:00 +08:00 via Android
    radix + 自己写 css
    masterclock
        9
    masterclock  
       2022-06-11 08:33:30 +08:00
    用 antd 我会在乎文件大小吗?[手动滑稽]
    liuqiongyu889
        10
    liuqiongyu889  
    OP
       2022-06-11 10:00:48 +08:00
    @DrakeXiang 肯定是按需引入啊,不然 css 体积不得炸裂
    okampfer
        11
    okampfer  
       2022-06-11 10:04:11 +08:00
    @lodisy #8 这样从头搞一套组件库需要多少时间?
    okampfer
        12
    okampfer  
       2022-06-11 10:05:25 +08:00
    @liuqiongyu889 那你移除 antd 后换成了什么呢?
    liuqiongyu889
        13
    liuqiongyu889  
    OP
       2022-06-11 10:54:04 +08:00
    @okampfer 自己写,或者找开源小颗粒度的方案,比如 select 使用 react-select 等,这些体积都很小,甚至可以自己看源码自己写一个。
    cwliang
        14
    cwliang  
       2022-06-11 11:13:36 +08:00
    如果能轻松移除,说明本身就不需要 antd
    lamCJ
        15
    lamCJ  
       2022-06-11 11:46:26 +08:00
    私以为 antd 做论坛这些不是很合适。antd 定位 PC 中后台,而中后台不怎么纠结全局污染基本一个后台系统就只用一套 UI ,而 js/css 大小大头又在业务逻辑。

    如果真有和其他 UI 框架冲突的情况,建议建立几个 layout ,在 layout 里面引入 antd 这些 UI 框架,views 再引入各自的 layout ,而不是在应用入口 js 文件里面全局引入。
    wenzichel
        16
    wenzichel  
       2022-06-11 11:57:58 +08:00
    是的,本来我博客自己有一套样式,评论系统单独用 react+antd 编写的,只要一加载 antd 的样式,我博客自己的样式就变了
    ybz
        17
    ybz  
       2022-06-11 13:14:54 +08:00
    轻度前端开发,最近试了 mui ,再也不想碰 antd 了
    guzzhao
        18
    guzzhao  
       2022-06-11 19:52:11 +08:00
    @ybz mui 的 css 好用吗,我看他用的 cssinjs 库
    beginor
        19
    beginor  
       2022-06-11 23:45:34 +08:00
    网站、论坛类的应用只需要 bootstrap 之类的轻量级样式库就够了, 不必使用 antd ,antd 的目标是后台管理系统
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3339 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 10:55 · PVG 18:55 · LAX 02:55 · JFK 05:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.