element-ui 支持组件的按需引入，同时也支持全部引入。全部引入的方式：
-
import
'element-ui/lib/theme-chalk/index.css';
-
import ElementUI
from
'element-ui';
-
Vue.use(ElementUI);
这种写法很简单，不过为了降低 element-ui 的包体大小，通常都会使用按需引入的方式。
按需引入需要安装 babel 插件：
npm install babel-plugin-component -D
安装完后，需要在 webpack 的配置文件使用该插件：
-
module: {
-
rules: [
-
{
-
// 正则表达式匹配js文件
-
test:
/\.js$/,
-
exclude:
/(node_modules)/,
-
use: [
-
{
-
loader:
'babel-loader',
-
options: {
-
"presets": [
-
"@babel/preset-env"
-
],
-
"plugins": [
-
[
-
"component",
-
{
-
"libraryName":
"element-ui",
-
"styleLibraryName":
"theme-chalk"
-
}
-
]
-
]
-
}
-
},
-
],
-
}
-
]
-
}
-
上面的核心配置其实是这段：
-
"plugins": [
-
[
-
"component",
-
{
-
"libraryName": "element-ui",
-
"styleLibraryName": "theme-chalk"
-
}
-
]
-
]
libraryName：项目名（npm包名），如果你基于 element-ui 创建了私有库，需要加上 scope，比如："libraryName": "@sy/element-ui"
styleLibraryName，样式库的名称，如果你基于 element-ui 创建了私有库，需要加上 scope，比如："styleLibraryName": "@sy/theme-chalk"。
除了在 webpack 配置文件中配置 babel，也可以创建一个 babel 的配置文件 .babelrc，babel-loader 会使用 babel 的配置文件，其实是把 babel-loader 中的 options 放到了配置文件中：
那么 babel-plugin-component 的原理是什么呢？其实就是把导入的语句通过 babel plugin 进行了替换：
但是，单组件引入，真的能降低包的大小吗？其实是有条件的，下图是通过部分导入的方式导入全部组件，我测试了下，按需大约导入 19 个组件包体大小就会大于全部导入：
如果，通过全局引入，包体的大小反而更小：
所以，在引入少量组件时可以通过部分引入的方式，若引入组件太多，可采用全部引入的方式，包体反而会更小。
大家加油！
长按关注
素燕《前端小课》
帮助 10W 人入门并进阶前端
官网：https://lefex.gitee.io/
转载：https://blog.csdn.net/lefex/article/details/117004472
查看评论