[TOC]
>[success] # 微前端實現方式對比
**Iframe 、web component、自研框架**
>[success] ## Iframe 方式實現
1. **優勢**：
* **Iframe** 的技術相對來講比較成熟
* 支持 **頁面嵌入**
* 天然支持運行 **沙箱隔離、獨立運行**
2. **劣勢**：
* 不同頁面之間 **域名不一樣 ，就會導致鑒權的問題跨域等等增加開發量**
* **需要對應的設計一套 應用通訊機制，如何監聽、傳參格式等內容**
* **應用加載、渲染、緩存等體系的表現**
>[success] ## web component 方式實現
**web component** 是 **h5** 的一項 **新技術** ，支持我們自己 **定義自己的一些組件和標簽去使用**
1. **優勢**：
* 支持 **自定義元素**
* 支持 **shadow dom** ，并可通過關聯進行控制
* 支持 **模板 template** 和 **插槽 slot ，引入自定義組件內容**
2. **劣勢**：
* **接入微前端需要重寫當前項目**
* **生態系統不完善，技術過新容易出現兼容性問題**
* **整體架構設計復雜，組件與組件之間拆分過細時，容易造成通訊和控制繁瑣**
>[success] ## 自研框架
1. **優勢**：
* **高度定制化，滿足需要做兼容的一切場景**
* **獨立的通信機制和沙箱運行環境，可解決應用之間相互影響的問題**
* **支持不同技術棧子應用，可無縫實現頁面無刷新渲染**
2. **劣勢**：
* **技術實現難度較高**
* **需要設計一套定制的通信機制**
* **首次加載會出現資源過大的情況**
>[success] ## 最終實現 - 自研框架
* 路由分發式
* 主應用控制路由匹配和子應用加載，共享依賴加載
* 子應用做功能，并接入主應用實現主子控制和聯動
