antd 与 element-ui如何按需引入，以及二者的不同

刺骨的言语ヽ痛彻心扉 2022-12-29 02:17 160阅读 0赞

antd与element-ui作为两个用途广泛的ui框架，均提供了按需引入，毕竟全量引入会导致包体积太大。尤其是当我们只想使用其中几个组件的时候，按需引入就变得更有必要了。

我特意数了一下，二者均提供了共计63个组件，这是不是有什么特殊意义…  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]  
当然这么多组件更进一步证明了按需引入的必要性。

其实官方均已经提供了按需引入的方式：

#### antd ####

# 安装 babel-plugin-import
    $ npm install babel-plugin-import -D
    # 在babel.config.js，或者.babelrc中添加如下配置
    { 
    	"plugins": [
        ["import", {  "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
      ]
    }
    
    # 无需再全局引入样式
    # babel-plugin-import 会帮助你加载 JS 和 CSS
    import {  DatePicker } from 'ant-design-vue'
    Vue.use(DatePicker)

#### Vue ####

# 安装插件
    npm install babel-plugin-component -D
    # babel.config.js 或者 .babelrc文件中添加
    "plugins": [
        [
          "component",
          { 
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
    ]
    
    # 使用，当然也不用引入全局样式
    import {  Button, Select } from 'element-ui';
    Vue.use(Button)
    Vue.use(Select)

按照上述的方法，的确是可行的，但这不是本文的重点，本文希望通过实践来区分二者的不同：

#### Antd ####

按以上方式引入一个DatePicker, 并配置好了babel

import Vue from 'vue'
    import App from './App.vue'
    
    import { DatePicker} from 'ant-design-vue';
    Vue.use(DatePicker);

看一下打包结果  
![在这里插入图片描述][2020121915425768.png]  
看到这个体积，我一直以为我配置错了，但我接着多引入了几个组件，发现体积的确变大了。也就是按需引入是成功的。

import { DatePicker, Pagination, Table} from 'ant-design-vue';
    Vue.use(DatePicker);
    Vue.use(Pagination);
    Vue.use(Table);

![在这里插入图片描述][20201219154615288.png]  
以上，后来我想antd作为一个中后台应用，这个体积感觉还好。

直到我又尝试了element-ui…

#### element-ui ####

import { DatePicker} from 'element-ui'
    Vue.use(DatePicker)

![在这里插入图片描述][2020121915494092.png]  
竟然如此优秀，那我不妨再加几个看看

import { Pagination, DatePicker, Input} from 'element-ui'
    
    Vue.use(Pagination)
    Vue.use(DatePicker)
    Vue.use(Input)

![在这里插入图片描述][20201219155146764.png]  
体积也没有加大多少，我觉得这个体积完全可以用在前台，而不仅仅是中后台，毕竟这个vendor里面还包含了vue以及core-js，我尝试在把element组件单独打包一个vendor  
![在这里插入图片描述][20201219155641122.png]  
果然，gzip的体积相比之前缩小了近一倍。

#### 总结 ####

感觉以后前台页面想使用各种组件，也完全可以按需引入element的组件库来实现，毕竟element成熟可靠。

最后感谢您的阅读，如果错误还请指正。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]: /images/20221120/ebd71f6ed14a4e78a7ac3b375e2e55af.png
[2020121915425768.png]: /images/20221120/69ef64e15a324a15bc9a2b3f97bd4911.png
[20201219154615288.png]: /images/20221120/3b1ac21db6d0480e9fce9ba77bd7c6c8.png
[2020121915494092.png]: /images/20221120/134de164187b42ab82dc9ef305606663.png
[20201219155146764.png]: /images/20221120/8238de12cbf04e33ae5dc462c4aa4a70.png
[20201219155641122.png]: https://img-blog.csdnimg.cn/20201219155641122.png