這幾天在想一個前端團隊的現(xiàn)狀，現(xiàn)在一個前端團隊肯定不止一個項目，而這些前端項目可能都會有一些共用的組件，所以很多公司內(nèi)部開發(fā)了內(nèi)部的組件庫，以供各個項目去使用，比如下圖，各個項目共同使用同一個組件庫：

當組件庫升級的時候，各個項目想要使用最新的組件功能，也得跟著升級依賴組件庫的版本號，并且重新將項目上線，就比如 1.0 -> 2.0：

總感覺挺麻煩的，所以在想：有沒有辦法，只需要組件庫升級，而項目并不需要去更新依賴包呢，甚至可以做到項目不需要重新上線，就能獲取最新的組件功能？

一、別把組件庫當依賴包？

剛剛說到當組件庫升級的時候，項目的依賴版本也得跟著升級，那是因為我們項目將組件庫當成了依賴包，放在node_modules 中。

那么如果我們可不可以別把組件庫當依賴包呢？也就是我們并不需要去安裝它們，就能使用它們~這樣的話組件庫升級，我們就不用也跟著升級依賴包了。

我們?nèi)サ袅?nbsp;node_modules 這一層，這樣組件庫升級，我們項目其實也可以做到不去關(guān)心版本號。

二、不安裝，怎么使用組件庫？

但是如果我們不安裝，該怎么去使用組件庫呢？其實是有辦法的： 通過HTTP網(wǎng)絡請求去請求組件庫代碼，解析代碼后進行渲染：

• 將組件庫代碼放在一個靜態(tài)服務上
• 項目中使用網(wǎng)絡去請求對應的組件代碼
• 解析代碼，并進行渲染

這也就是 Vue 的 遠程加載組件：

三、實踐

接下來實踐一下遠程加載組件：

1. Express 搭建靜態(tài)服務

先用Express搭建一個簡單的靜態(tài)服務，并放置一些組件

• components目錄： 放置一些遠程組件代碼
• index： 靜態(tài)服務入口

首先看看 index.js 的代碼，用來作為靜態(tài)服務的入口：

再分別看看RemoteComp-A.js、RemoteComp-B.js 的代碼，分別是兩個組件的代碼：

接著在終端輸入：

node index.js

即可啟動服務，現(xiàn)在可以在網(wǎng)頁中看能不能訪問到組件代碼，如果可以說明服務啟動成功了。

2. 項目中遠程加載組件

接著需要在項目中去通過網(wǎng)絡請求獲取組件代碼，并進行解析渲染：

• 通過fetch去請求對應的組件代碼
• 使用new Function進行代碼執(zhí)行獲取
• 傳入 component 的 is 進行渲染

最終能達到加載遠程組件的效果。