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成熟可靠。
最后感谢您的阅读,如果错误还请指正。