Labs 導讀
前端即網站前台部分，運作在PC端，移動端等浏覽器上展現給使用者浏覽的網頁。随着網際網路技術的發展，HTML5，CSS3，前端架構的應用，跨平台響應式網頁設計能夠适應各種螢幕分辨率，合适的動效設計，給使用者帶來極高的使用者體驗。随着時間的推移，前端往往會越來越臃腫，随着技術棧的更新、UI的多元化、定制化的需求開發以及更多的不可預知的原因使得項目越來越難維護。是以，微前端概念橫空出世。
作者：胡昉
機關：中國移動智慧家庭營運中心
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系統一樣簡單。[email protected]将跳出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）：