组件库的按需引用可以精简项目资源大小，提升项目性能。目前使用广泛的组件库，如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查看到组件库的引入已经是按需引入了。