微前端 Micro-Frontends - 概念

什麼是微前端？（what）
微前端是一種類似於微服務的架構，它將微服務的理念應用於瀏覽器端，即將 Web 應用由單一的單體應用轉變為多個小型前端應用聚合為一的應用。各個前端應用可以獨立執行、獨立開發、獨立部署。微前端的核心在於拆，拆完後在合。

為什麼需要用到微前端？（why）
原先的單體應用

1. 當我們的專案越來越複雜的，專案中的功能模組也越來越多，這就導致了一個問題，程式碼複雜。
   1. 程式碼構建部署緩慢
   2. 對開發人員非常不友好（特別是新接手的人來說，找個模組可能都要好久）
   3. 模組耦合太高，一個模組崩了，可能會影響到整個系統
2. 跨團隊間的合作，比如一個 vue 團隊，一個 react 團隊，兩個團隊使用的技術棧是不同的，如何在同一個專案中使用兩種技術棧？

微前端應用

1. 不同的模組可以拆分成不同的專案，不同的團隊去維護，對於一個專案來說相當於化整為零，每個專案都可以自己部署開發，程式碼體量小了，構建部署也就很快，開發人員只要著重去了解某個模組的功能，模組的耦合度降低了，就算一個模組掛了，也不會影響整個系統的執行
2. 不同的團隊可以選擇不同的技術棧，只需要在後續的整合過程中銜接起來就行（因為最後大家都是 js）

什麼時候需要用到微前端？（when）
當我們的專案已經非常複雜了，我們這時候可以考慮使用微前端來拆分了（這裡的工作量就很大了，相當於整個系統的重構）。
如果一開始我們就預估到我們的專案會很大，那麼我們可以一開始就使用微前端來管理我們的專案。
需要照顧到老程式碼時，但是目前又使用的是一些新技術，涉及到不同技術棧的使用時，可以考慮使用微前端。
總結下來遵循以下幾個原則：
A. 微前端最佳的使用場景是一些B端的管理系統，既能相容整合歷史系統，也可以將新的系統整合進來，並且不影響原先的互動體驗。
B. 整體的微前端不僅僅是隻將系統整合進來，而是整個微前端體系的完善，這其中就包括：
1)：基座應用和微應用的自動部署能力。
2)：微應用的配置管理能力。
3)：本地開發除錯能力。
4)：線上監控和統計能力等等。
只有將整個能力體系搭建完善，才能說是整個微前端體系流程的完善。
C. 當發現使用微前端反而使效率變低，簡單的變更復雜那就說明微前端並不適用。

微前端有哪些框架
Single-Spa ：最早的微前端框架，相容多種前端技術棧。
Qiankun ：基於Single-Spa，阿里系開源微前端框架。
Icestark ：阿里飛冰微前端框架，相容多種前端技術棧。
Ara Framework ：由服務端渲染延伸出的微前端框架。
Mooa ：基於Angular的微前端服務框架，這個其實還是基於 single-spa 的

實現微前端的幾種方案？（how）

目前主流的微前端解決方案

• Single-SPA single-spa 是一個用於前端微服務化的 JavaScript 前端解決方案 (本身沒有處理樣式隔離， js 執行隔離) 實現了路由劫持和應用載入
• qiankun 基於Single-SPA, 提供了更加開箱即用的 API （ single-spa + sandbox+ import-html-entry ） 做到了，技術棧無關、並且接入簡單（像iframe 一樣簡單）