組件庫的按需引用可以精簡項目資源大小应民，提升項目性能吼拥。目前使用廣泛的組件庫倚聚，如element、iview凿可、antd等都可以按需引入了惑折。那如何實現(xiàn)組件庫的按需引入呢？
需求解析
比如一個vue項目的組件庫：ComponentsDemo矿酵，全局引入組件庫的代碼為：
import vsuite from "vsuite";
Vue.use(vsuite);
需要按需引入的時候唬复，代碼為：
import ComponentA from "ComponentsDemo/src/components/component-a ";
vue.component("ComponentA ", ComponentA );
這樣寫，其實已經(jīng)滿足了我們的需求全肮。但是這樣寫不是很優(yōu)雅敞咧，那么，怎么簡化import ComponentA from "ComponentsDemo/src/components/component-a ";呢辜腺？這就設(shè)計到對import語句的解析轉(zhuǎn)化了休建。
由此想到了Babel乍恐，我們知道Babel 是一個 JavaScript 編譯器，主要用于將 ECMAScript 2015+ 版本的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語法测砂，以便能夠運行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中茵烈。而Babel插件可以在輸入源碼 => 輸出編譯后的代碼的過程中做一些操作，比如實現(xiàn)以下代碼：
import { ComponentA, ComponentB } from 'ComponentsDemo';
↓ ↓ ↓ ↓ ↓ ↓
import ComponentA from "ComponentsDemo/src/components/component-a ";
import ComponentB from "ComponentsDemo/src/components/component-b ";
能實現(xiàn)這一步驟的babel插件之中砌些，babel-plugin-import使用的比較多呜投。
babel-plugin-import
babel-plugin-import是阿里開源的一款babel插件，其主要用于組件的按需引入存璃。
babel-plugin-import npm鏈接
關(guān)于babel-plugin-import的制作思路可以看這篇文章：手把手教你開發(fā)一個babel-plugin
vue組件庫按需引入設(shè)置
自定義的vue組件庫ComponentsDemo仑荐，想要讓它可以被按需引入，需要注意目錄等的構(gòu)成方式纵东。
根據(jù)babel-plugin-import在.babelrc中的設(shè)置粘招，如果.babelrc設(shè)置如下：
{
"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 ";
根據(jù)查找的規(guī)則，ComponentA 是ComponentsDemo組件庫下src/components/目錄下的文件名或者目錄名偎球，第一個字母大寫會被轉(zhuǎn)成小寫（如ComponentA 為Icon洒扎，找的文件名就是icon），駝峰命名會被轉(zhuǎn)成-來連接（如ComponentA 為MenuItem衰絮，會查找名為menu-item的文件）袍冷。
故此，我們的組件庫的結(jié)構(gòu)可以為：
...
- src
- components
- component-a
- index.vue
- component-b
- index.vue
- component-c
- index.vue
-- -- index.js
...
組件的導(dǎo)出文件index.js的結(jié)構(gòu)：
import ComponentA from './components/component-a';
import ComponentB from './components/component-b';
import ComponentC from './components/component-c';
export default {
ComponentA ,
ComponentB ,
ComponentC
}
需要注意components目錄下的文件名需要和組件名對應(yīng)岂傲，需要能對應(yīng)解析到难裆。
按需引入組件庫
在需要引入組件庫的項目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);
注意如果你的組件庫的樣式?jīng)]有跟組件放在一起時镊掖，需要額外引入組件樣式：
import "~A/src/styles/index.scss";
此時npm run build --report時，可以打開report.html查看到組件庫的引入已經(jīng)是按需引入了褂痰。
