Part 01  什么是微前端  

微前端是一種多個團隊通過獨立發布功能的方式來共同構建現代化web應用的技術手段及方法策略。

微前端借鑒了微服務的架構理念，將一個龐大的前端應用拆分為多個獨立靈活的小型應用，每個應用都可以獨立開發、獨立運行、獨立部署，再將這些小型應用聯合為一個完整的應用。微前端既可以將多個項目融合為一，又可以減少項目之間的耦合，提升項目擴展性，相比一整塊的前端倉庫，微前端架構下的前端倉庫傾向于更小更靈活。微前端的架構如下：

Part 02  特性  

- 技術棧無關

主框架不限制接入應用的技術棧，子應用可自主選擇技術棧。

- 獨立開發/部署

各個團隊之間倉庫獨立，單獨部署，互不依賴。

- 增量升級

當一個應用龐大之后，技術升級或重構相當麻煩，而微應用具備漸進式升級的特性。

- 獨立運行時

微應用之間運行時互不依賴，有獨立的狀態管理。

- 提升效率

應用越龐大，越難以維護，協作效率越低下。微應用可以很好拆分，提升效率。

Part 03  目前可用的微前端方案 

微前端的方案目前有以下幾種類型：

• 基于iframe完全隔離的方案

作為前端開發，我們對iframe已經非常熟悉了，在一個應用中可以獨立運行另一個應用。它具有顯著的優點：

1.非常簡單，無需任何改造；

2.完美隔離，JS、CSS都是獨立的運行環境；

3.不限制使用，頁面上可以放多個iframe來組合業務。

當然，缺點也非常突出：

1.無法保持路由狀態，刷新后路由狀態就丟失；

2.完全的隔離導致與子應用的交互變得極其困難，只能采用postMessage方式；

3.iframe中的彈窗無法突破其本身；

4.整個應用全量資源加載，加載太慢；

這些顯著的缺點也催生了其他方案的產生。

• 基于single-spa路由劫持方案

single-spa是社區公認的主流方案，可以基于它做二次開發。

通過劫持路由的方式來做子應用之間的切換，但接入方式需要融合自身的路由，有一定的局限性。

• 阿里qiankun

qiankun對single-spa做了一層封裝。主要解決了single-spa的一些痛點和不足。通過import-html-entry包解析HTML獲取資源路徑，然后對資源進行解析、加載。

qiankun可以用于任意js框架，微應用接入像嵌入一個iframe系統一樣簡單。qiankun@2.0將跳出route-based的微前端場景。

- 優點

1.阿里團隊開發維護，文檔多。

2.基于single-spa封裝，提供了更加開箱即用的API。

3.HTML Entry接入方式，讓你接入微應用像使用iframe一樣簡單。

4.樣式隔離，確保微應用之間樣式互相不干擾。

5.JS沙箱，確保微應用之間全局變量/事件不沖突。

6.資源預加載，在瀏覽器空閑時間預加載未打開的微應用資源，加速微應用打開速度。

7.umi插件，提供了@umijs/plugin-qiankun供umi應用一鍵切換成微前端架構系統。

8.兼容IE11。

- 缺點

1.上線部署文檔較少。

2.qiankun只能解決子項目之間的樣式相互污染，不能解決子項目的樣式污染主項目的樣式。

• 京東micro-app方案

京東micro-app并沒有沿襲single-spa的思路，而是借鑒了WebComponent思想，通過CustomElement結合自定義的ShadowDom，將微前端封裝成一個webComponents組件，從而實現微前端的組件化渲染。

Part 04、微前端實踐  

以qiankun為例，構建一個微前端。

?? 主應用（vue）

1、安裝qiankun

2、修改 main.js

3、router頁面配置加載微應用

修改主應用router.js

在About.vue文件中加入

4、如果在vue-admin模板中使用qiankun，需要注意的是：<div id="container"></div> 不能寫在頁面中，只能寫在Appmain.vue 中，路由需要配置重定向。

判斷改變路由。

AppMain.vue,需要判斷顯示的是哪個微應用，改變其id顯示。

微應用（vue）

1、在src目錄新增public-path.js：

2、main.js修改。

3、打包配置修改（vue.config.js）：