提起微前端，相信大家第一時間想到的都是QianKun和Single-SPA，但是現在的微前端框架依舊存在許多問題，于是京東前端團隊推出的一款微前端框架——MicroApp

什么是微前端

微前端是一種頁面整合方案，它的核心在于將一個龐大的前端應用拆分成多個獨立靈活的小型應用，每個應用都可以獨立開發、獨立運行、獨立部署，再將這些小型應用融合為一個完整的應用，或者將原本運行已久、沒有關聯的幾個應用融合為一個應用。

微前端既可以將多個項目融合為一，又可以減少項目之間的耦合，提升項目擴展性，相比一整塊的前端倉庫，微前端架構下的前端倉庫傾向于更小更靈活。

MicroApp

MicroApp是由京東前端團隊推出的一款微前端框架，它從組件化的思維，基于類WebComponent進行微前端的渲染，旨在降低上手難度、提升工作效率。MicroApp無關技術棧，也不和業務綁定，可以用于任何前端框架。

并且micro-app與技術棧無關，對前端框架沒有限制，任何框架都可以作為基座應用嵌入任何類型的子應用。

特點

• 使用簡單： 將功能封裝到 WebComponent 中
• 零依賴。 無依賴、更高的擴展性
• 兼容所有框架 技術棧無關
• 通過 CustomElement 結合自定義的 ShadowDom，將微前端封裝成一個類 WebComponent 組件，從而實現微前端的組件化渲染。

原理

MicroApp 的核心功能在CustomElement基礎上進行構建，CustomElement用于創建自定義標簽，并提供了元素的渲染、卸載、屬性修改等鉤子函數，我們通過鉤子函數獲知微應用的渲染時機，并將自定義標簽作為容器，微應用的所有元素和樣式作用域都無法逃離容器邊界，從而形成一個封閉的環境。

生命周期列表

• created：當micro-app標簽被創建后，加載資源之前執行。
• beforemount：資源加載完成，正式渲染之前執行。
• mounted：子應用已經渲染完成后執行
• unmount：子應用卸載時執行。
• error：當出現破壞性錯誤，無法繼續渲染時執行。

安裝使用

安裝依賴

yarn add @micro-zoe/micro-app

引入

// mAIn.js

import microApp from '@micro-zoe/micro-app'

microApp.start()

在頁面中嵌入微前端應用

<!--