## 微前端的概念
微前端就是將不同的功能按照不同的維度拆分成多個子應(yīng)用香伴。通過主應(yīng)用來加載這些子應(yīng)用慰枕。 微前端的核心在于? `如何拆` 和 `拆完后如何合`
- 1.和業(yè)務(wù)關(guān)系不大、相同部分如何抽離+維護瞒窒？
- 2.業(yè)務(wù)相關(guān)的內(nèi)容捺僻，相同部分如何抽離+維護？
**當(dāng)業(yè)務(wù)關(guān)系不大崇裁，可以從組件庫重手：**
- 第一階段：從項目中抽離了組件庫和圖表庫（兩個獨立工程匕坯、項目中通過 git subtree引用）
- 第二階段：對 charts、components 按照組件思路進行改造（merge + extend + template）
- 第三階段：建立 Demo 站拔稳，為 charts葛峻、components 提供開發(fā)和展示環(huán)境（無特殊訴求無需查看源碼）
- 第四階段：抽離 charts、components 共同的 utils（獨立倉庫 git subtree 引用）
- 第五階段：通過 yarn workspace 來處理公共依賴（關(guān)鍵點）
- 第六階段：解決 charts巴比、components术奖、utils 多倉提交的問題（monorepo）
對于業(yè)務(wù)相關(guān)內(nèi)容：
可以用微前端
### 微前端的優(yōu)勢
- 技術(shù)棧無關(guān)
- 主框架不限制介入應(yīng)用的技術(shù)棧，微應(yīng)用具備完全自主權(quán)
- 獨立開發(fā)轻绞、獨立部署
- 增量升級
- 微前端是一種非常好的實現(xiàn)漸進式重構(gòu)的手段和策略
- 微應(yīng)用倉庫獨立采记，前后端可獨立開發(fā)，主框架自動完成同步更新
- 獨立運行
- 每個微應(yīng)用之間狀態(tài)隔離政勃，運行時狀態(tài)不共享
### 劣勢
- 接入難度較高
- 應(yīng)用場景移動端少唧龄，管理端多
微前端的演變：
- 1.iframe方案
- 2.single-spa方案
# iframe方案
對于iframe方案，其實就是通過iframe標(biāo)簽在一個頁面里嵌套了另一個頁面奸远，不過它有一定的弊端：
- 路由限制：在iframe內(nèi)的頁面里切換路由后既棺，無法跟隨瀏覽器進行前進后退
- 資源加載：每次iframe的頁面都需要重新加載
- 資源共享：與外層的父組件隔離讽挟，無法實現(xiàn)狀態(tài)共享
- dom結(jié)構(gòu)不共享：iframe里的全局modal框也是顯示在iframe里
# single-spa
single-spa方案解決了iframe方案的弊端。
[single-spa官網(wǎng)](https://link.juejin.cn?target=https%3A%2F%2Fsingle-spa.js.org%2F)
