组件库的按需引用可以精简项目资源大小，提升项目性能。目前使用广泛的组件库，如element、iview、antd等都可以按需引入了。那如何实现组件库的按需引入呢？
需求解析
比如一个vue项目的组件库：ComponentsDemo，全局引入组件库的代码为：
import vsuite from "vsuite";
Vue.use(vsuite);
需要按需引入的时候，代码为：
import ComponentA from "ComponentsDemo/src/components/component-a ";
vue.component("ComponentA ", ComponentA );
这样写，其实已经满足了我们的需求。但是这样写不是很优雅，那么，怎么简化import ComponentA from "ComponentsDemo/src/components/component-a ";呢？这就设计到对import语句的解析转化了。
由此想到了Babel，我们知道Babel 是一个 JavaScript 编译器，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。而Babel插件可以在输入源码 => 输出编译后的代码的过程中做一些操作，比如实现以下代码：
import { ComponentA, ComponentB } from 'ComponentsDemo';
↓ ↓ ↓ ↓ ↓ ↓
import ComponentA from "ComponentsDemo/src/components/component-a ";
import ComponentB from "ComponentsDemo/src/components/component-b ";
能实现这一步骤的babel插件之中，babel-plugin-import使用的比较多。
babel-plugin-import
babel-plugin-import是阿里开源的一款babel插件，其主要用于组件的按需引入。
babel-plugin-import npm链接
关于babel-plugin-import的制作思路可以看这篇文章：手把手教你开发一个babel-plugin
vue组件库按需引入设置
自定义的vue组件库ComponentsDemo，想要让它可以被按需引入，需要注意目录等的构成方式。
根据babel-plugin-import在.babelrc中的设置，如果.babelrc设置如下：
{
"plugins": [
[
"import",
{
"libraryName": "ComponentsDemo",
"libraryDirectory": "src/components"
}
]
]
}
babel-plugin-import在读取以下代码时：
import { ComponentA } from "ComponentsDemo";
vue.component("ComponentA ", ComponentA );
查找引入组件库中的组件的代码解析如下：
import ComponentA from "ComponentsDemo/src/components/component-a ";
根据查找的规则，ComponentA 是ComponentsDemo组件库下src/components/目录下的文件名或者目录名，第一个字母大写会被转成小写（如ComponentA 为Icon，找的文件名就是icon），驼峰命名会被转成-来连接（如ComponentA 为MenuItem，会查找名为menu-item的文件）。
故此，我们的组件库的结构可以为：
...
- src
- components
- component-a
- index.vue
- component-b
- index.vue
- component-c
- index.vue
-- -- index.js
...
组件的导出文件index.js的结构：
import ComponentA from './components/component-a';
import ComponentB from './components/component-b';
import ComponentC from './components/component-c';
export default {
ComponentA ,
ComponentB ,
ComponentC
}
需要注意components目录下的文件名需要和组件名对应，需要能对应解析到。
按需引入组件库
在需要引入组件库的项目Test中，首先安装babel-plugin-import:
npm i babel-plugin-import -D
根目录下新建文件.babelrc
{
"plugins": [
[
"import",
{
"libraryName": "ComponentsDemo",
"libraryDirectory": "src/components"
}
]
]
}
入口文件中按需引入组件：
import { ComponentA , ComponentB } from "ComponentsDemo";
vue.component("ComponentA", ComponentA);
vue.component("ComponentB", ComponentB);
注意如果你的组件库的样式没有跟组件放在一起时，需要额外引入组件样式：
import "~A/src/styles/index.scss";
此时npm run build --report时，可以打开report.html查看到组件库的引入已经是按需引入了。
