建站
咨詢
售后
建站咨詢
新聞中心
微前端
微前端是一種架構風格，旨在將大型前端應用程序拆分為更小、更可管理的部分。它通過將前端應用程序劃分為多個獨立的子應用，每個子應用都有自己的代碼庫和獨立的開發(fā)團隊來實現(xiàn)。這些子應用可以獨立部署、獨立運行，并且可以在同一個頁面上協(xié)同工作。
拜城網(wǎng)站建設公司創(chuàng)新互聯(lián),拜城網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為拜城1000+提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\成都外貿網(wǎng)站建設要多少錢，請找那個售后服務好的拜城做網(wǎng)站的公司定做！
微前端的核心思想是將前端應用程序拆分為多個獨立的功能模塊，每個模塊都可以獨立開發(fā)、測試和部署。這樣可以提高開發(fā)效率，降低代碼耦合度，并且可以讓不同團隊獨立開發(fā)不同的模塊，從而提高團隊的協(xié)作效率。
在微前端架構中，每個子應用都可以使用不同的技術棧和框架，因此可以根據(jù)具體需求選擇最適合的技術棧。同時，微前端還提供了一些通信機制，使得不同子應用之間可以進行跨域通信和共享數(shù)據(jù)。
總之，微前端是一種將前端應用程序拆分為多個獨立子應用的架構風格，可以提高開發(fā)效率、降低代碼耦合度，并且可以讓不同團隊獨立開發(fā)不同的模塊，從而提高團隊的協(xié)作效率。
架構理念
微前端并不是一項新的技術，而是一種架構理念，它將單一的 web 應用拆解成多個可以獨立開發(fā)、獨立運行、獨立部署的小型應用，并將它們整合為一個應用。
在實際業(yè)務中，我們也遇到同樣的問題，并且在不同的業(yè)務場景下嘗試了各種解決方案，如 iframe、npm 包、微前端框架，并對各種方案的優(yōu)劣進行了對比。
iframe：在所有微前端方案中，iframe 是最穩(wěn)定的、上手難度最低的，但它有一些無法解決的問題，例如性能低、通信復雜、雙滾動條、彈窗無法全局覆蓋，它的成長性不高，只適合簡單的頁面渲染。
npm 包：將子應用封裝成 npm 包，通過組件的方式引入，在性能和兼容性上是最優(yōu)的方案，但卻有一個致命的問題就是版本更新，每次版本發(fā)布需要通知接入方同步更新，管理非常困難。
微前端框架：流行的微前端框架有 single-spa 和 qiankun，它們將維護成本和功能上達到一種平衡，是目前實現(xiàn)微前端備受推崇的方案。
- single-spa 是一個將多個單頁面應用聚合為一個整體應用的 JavaScript 微前端框架。
- qiankun 基于 single-spa 封裝的微前端框架。qiankun繼承了umi框架，但是這個框架配置起來比較麻煩。
圖片
在 single-spa 和 qiankun 中都是通過監(jiān)聽 url change 事件，在路由變化時匹配到渲染的子應用并進行渲染。這種基于路由監(jiān)聽渲染是 single-spa 最早實現(xiàn)的，作為出現(xiàn)最早、最有影響力的微前端框架，single-spa 被很多框架和公司借鑒，也導致目前實現(xiàn)的微前端的方式大多是基于路由監(jiān)聽。
微前端的核心在于資源加載與渲染，iframe 的渲染方式就是一個典型，只要能夠實現(xiàn)一種元素隔離的功能并且路由符合要求，子應用理論上不需要修改代碼就可以嵌入另外一個頁面渲染，
micro-app
圖片
micro-app 是京東零售推出的一款微前端框架，它基于類 WebComponent 進行渲染，從組件化的思維實現(xiàn)微前端，旨在降低上手難度、提升工作效率。它是目前接入微前端成本最低的框架，并且提供了JS沙箱、樣式隔離、元素隔離、預加載、資源地址補全、插件系統(tǒng)、數(shù)據(jù)通信等一系列完善的功能。
micro-app 與技術棧無關，也不和業(yè)務綁定，可以用于任何前端框架。
在線案例
圖片
micro-app 優(yōu)勢
micro-app 是京東出品，一款基于 WebComponent 的思想，輕量、高效、功能強大的微前端框架。micro-app 作為一個用于實現(xiàn)微前端架構的開源庫，具有以下幾個優(yōu)勢：
- 解耦和獨立開發(fā)：micro-app允許將前端應用程序拆分為多個獨立的子應用，每個子應用都有自己的代碼庫和獨立的開發(fā)團隊。這種解耦和獨立開發(fā)的方式可以提高開發(fā)效率，降低代碼耦合度，并且可以讓不同團隊獨立開發(fā)不同的模塊，從而提高團隊的協(xié)作效率。
- 靈活的技術棧選擇：micro-app允許每個子應用使用不同的技術棧和框架，因此可以根據(jù)具體需求選擇最適合的技術棧。這種靈活的技術棧選擇可以滿足不同團隊的技術偏好和需求，同時也可以利用現(xiàn)有的技術棧和框架的優(yōu)勢。
- 動態(tài)加載和卸載：micro-app支持動態(tài)加載和卸載子應用，使得應用程序可以根據(jù)需要動態(tài)加載和卸載子應用。這種動態(tài)加載和卸載的方式可以提高應用程序的性能和可擴展性，同時也可以減少初始加載時間和資源占用。
- 跨域通信和共享數(shù)據(jù)：micro-app提供了一些通信機制，使得不同子應用之間可以進行跨域通信和共享數(shù)據(jù)。這種跨域通信和共享數(shù)據(jù)的方式可以實現(xiàn)子應用之間的交互和數(shù)據(jù)共享，從而提供更豐富的功能和用戶體驗。
- 生態(tài)和社區(qū)支持：micro-app作為一個開源庫，擁有活躍的社區(qū)和豐富的生態(tài)系統(tǒng)。開發(fā)者可以從社區(qū)中獲取支持、學習和分享經(jīng)驗，同時也可以使用社區(qū)提供的插件和工具來擴展和增強micro-app的功能。
micro-app 使用起來成本最低，將所有的頁面封裝到一個類 WebComponent 組件中，從而實現(xiàn)在主應用基座中嵌入一行代碼即可渲染一個微前端應用。不需要像 single-spa 和 qiankun 一樣要求子應用修改渲染邏輯并暴露出方法，也不需要修改 webpack 配置，是目前市面上接入微前端成本最低的方案。提供了 js沙箱、樣式隔離、元素隔離、預加載、數(shù)據(jù)通信、靜態(tài)資源補全等一系列完善的功能。沒有任何依賴，這賦予它小巧的體積和更高的擴展性。為了保證各個業(yè)務之間獨立開發(fā)、獨立部署的能力，micro-app 做了諸多兼容，在任何技術框架中都可以正常運行。
橫向對比
圖片
為什么選擇 WebComponent ?
圖片
WebComponent 核心組成有兩部分：CustomElement 和 ShadowDom。
- CustomElement 用于創(chuàng)建自定義標簽。
- ShadowDom 用于創(chuàng)建陰影 DOM，陰影DOM具有天然的樣式隔離和元素隔離屬性。
由于 WebComponent 是原生組件，它可以在任何框架中使用，理論上是實現(xiàn)微前端最優(yōu)的方案。但 WebComponent 有一個無法解決的問題 - ShadowDom的兼容性非常不好，一些前端框架在 ShadowDom 環(huán)境下無法正常運行，尤其是 react 框架。
圖片
而對于 micro-app 它選擇了另外一條路類 WebComponent + HTML Entry。
- 類 WebComponent，就是使用 CustomElement 結合自定義的 ShadowDom 實現(xiàn) WebComponent 基本一致的功能。
- HTML Entry，就是微前端架構中的一個概念，指的是每個獨立子應用的入口點。在微前端架構中，每個子應用都有自己的 HTML 入口文件，用于加載和渲染該子應用的內容。通過加載遠程 html，解析其 DOM 結構從而獲取 js、css 等靜態(tài)資源來實現(xiàn)微前端的渲染，這也 是qiankun 目前采用的渲染方案。
micro-app，它的渲染機制和功能與 WebComponent 類似，開發(fā)者可以像使用 web 組件一樣接入微前端。它可以兼容任何框架，在使用方式和數(shù)據(jù)通信上也更加組件化，這顯著降低了基座應用的接入成本，并且由于元素隔離的屬性，子應用的改動量也大大降低。
micro-app 核心原理
micro-app 的核心功能在 CustomElement 基礎上進行構建，CustomElement 用于創(chuàng)建自定義標簽，并提供了元素的渲染、卸載、屬性修改等鉤子函數(shù)，通過鉤子函數(shù)獲知微應用的渲染時機，并將自定義標簽作為容器，微應用的所有元素和樣式作用域都無法逃離容器邊界，從而形成一個封閉的環(huán)境。
圖片
小結
micro-app 將所有功能都封裝到一個類 WebComponent 組件中，從而實現(xiàn)在基座應用中嵌入一行代碼即可渲染一個微前端應用。同時micro-app 還提供了js沙箱、樣式隔離、元素隔離、預加載、數(shù)據(jù)通信、靜態(tài)資源補全等一系列完善的功能。micro-app 零依賴，沒有任何依賴，這賦予它小巧的體積和更高的擴展性。micro-app 兼容所有框架，為了保證各個業(yè)務之間獨立開發(fā)、獨立部署的能力，micro-app 做了諸多兼容，在任何技術框架中都可以正常運行。
參考
- https://gitee.com/helibin/micro-app
- https://mp.weixin.qq.com/s/BvjjCs8qaxrl00R-Sr7tSg
- http://www.codebox.com.cn/?id=27903
- https://zhuanlan.zhihu.com/p/519416291
網(wǎng)站欄目：基于WebComponents的微前端框架
網(wǎng)頁網(wǎng)址：http://www.5511xx.com/article/cojospi.html
