[Javascript] 微前端: micro-app

micro-app

https://github.com/micro-zoe/micro-app/

micro-app doc

https://cangdu.org/micro-app/docs.html#/

micro-app是京東零售推出的一款微前端框架，它基於類WebComponent進行渲染，從元件化的思維實現微前端，旨在降低上手難度、提升工作效率。它是目前接入微前端成本最低的框架，並且提供了JS沙箱、樣式隔離、元素隔離、預載入、資源位址補全、外掛程式系統、資料通信等一系列完善的功能。micro-app與技術棧無關，也不和業務綁定，可以用於任何前端框架。在micro-app之前，業內已經有一些開源的微前端框架，比較流行的有2個：single-spa和qiankun。

single-spa是通過監聽 url change 事件，在路由變化時匹配到渲染的子應用並進行渲染，這個思路也是目前實現微前端的主流方式。同時single-spa要求子應用修改渲染邏輯並暴露出三個方法：bootstrap、mount、unmount，分別對應初始化、渲染和卸載，這也導致子應用需要對入口檔進行修改。因為qiankun是基於single-spa進行封裝，所以這些特點也被qiankun繼承下來，並且需要對webpack配置進行一些修改。

micro-app並沒有沿襲single-spa的思路，而是借鑒了WebComponent的思想，通過CustomElement結合自訂的ShadowDom，將微前端封裝成一個類WebComponent元件，從而實現微前端的組件化渲染。並且由於自訂ShadowDom的隔離特性，micro-app不需要像single-spa和qiankun一樣要求子應用修改渲染邏輯並暴露出方法，也不需要修改webpack配置，是目前市面上接入微前端成本最低的方案。

#微前端, 框架, WebComponent