[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


留言