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

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

我特意数了一下，二者均提供了共计63个组件，这是不是有什么特殊意义…

当然这么多组件更进一步证明了按需引入的必要性。

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

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);

看一下打包结果

看到这个体积，我一直以为我配置错了，但我接着多引入了几个组件，发现体积的确变大了。也就是按需引入是成功的。

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

以上，后来我想antd作为一个中后台应用，这个体积感觉还好。

直到我又尝试了element-ui…

element-ui

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

竟然如此优秀，那我不妨再加几个看看

import {Pagination, DatePicker, Input} from 'element-ui'

Vue.use(Pagination)
Vue.use(DatePicker)
Vue.use(Input)

体积也没有加大多少，我觉得这个体积完全可以用在前台，而不仅仅是中后台，毕竟这个vendor里面还包含了vue以及core-js，我尝试在把element组件单独打包一个vendor

果然，gzip的体积相比之前缩小了近一倍。

总结

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

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