這么好的微前端解決方案你頂?shù)米。?/h1>
微前端概念由微服務概念延展而來,摒棄大型單體方式,將前端整體分解為小而簡單的塊,這些塊可以獨立開發(fā)、測試和部署,同時仍然聚合為一個產(chǎn)品出現(xiàn)在客戶面前。
微前端不是一門具體的技術,而是整合了技術、策略和方法,可能會以腳手架、輔助插件和規(guī)范約束這種生態(tài)圈形式展示出來,是一種宏觀上的架構。這種架構目前有多種方案,都有利弊之處,但只要適用當前業(yè)務場景的就是好方案。
1. iframe
iframe 是 html 提供的標簽, 可以加載其他web應用的內容 ,還能兼容所有的瀏覽器,所以它可以加載全部你想要加載的web應用 。它最大的特點就是提供了瀏覽器原生的硬隔離方案,無論是樣式隔離、js 隔離這類問題全部都能完美解決。
iframe雖然能基本做到微前端所該做的所有事情,但它的隔離性無法被突破,導致應用間上下文無法被共享,會帶來開發(fā)體驗、產(chǎn)品體驗的問題。不是單頁應用,會導致瀏覽器刷新 iframe url 狀態(tài)丟失、后退前進按鈕無法使用。
2. ES Module
微前端無外乎三大特性, 無技術棧限制 、 應用單獨開發(fā) , 多應用整合 。
- 無技術棧限制: ESM 加載的只是js內容,無論哪個框架,最終都要編譯成js,所以等于ESM 都能加載。
- 應用單獨開發(fā):ESM只是js的一種規(guī)范,不會影響應用的開發(fā)模式。
- 多應用整合:只要將微應用以 ESM 的方式暴露出來,就能正常加載。遠程加載模塊: ESM 能夠直接請求 cdn 資源。ESM 也存在著兼容性這個弊端,大部分老版的瀏覽無法直接使用,不過他可以通過 webpack 、 rollup 、 esbuild 、 snowpack 等編譯工具成為兼容性的代碼。
3. qiankun
在微前端界, qiankun 稱得上是最早成型且知名度最廣的框架了,qiankun 的特點在其官網(wǎng)中是這樣說的:
基于 single-spa 封裝,提供了更加開箱即用的 API技術棧無關,任意技術棧的應用均可使用,不論是React/Vue/Angular/JQuery 還是其他等框架HTML Entry 接入方式,讓你接入微應用像使用 iframe 一樣簡單樣式隔離,保證微應用之間樣式互相不干擾JS 沙箱,微應用之間全局變量/事件不沖突資源預加載。
4. EMP
Federation 實現(xiàn),達到第三方依賴共享,減少不必要的代碼引入的目的。每個微應用獨立部署運行,并通過cdn的方式引入主程序中,所以只要部署一次,即可提供給任何基于 Module Federation 的應用使用。而且這部分代碼是遠程引入,不必參加應用的打包。
EMP 通過 cdn 加載微應用,所以每個微應用中的代碼有變動時,不用重新打包發(fā)布就能加載到最新的微應用。每個微應用間都可以引入其他的微應用,沒有中心應用的概念??缂夹g棧組件式調用,提供了在主應用框架中可以調用其他框架組件的能力。
開發(fā)者可以按需加載,選擇加載微應用中需要的部分,不強制將整個應用全部加載。每一個應用都可以進行狀態(tài)共享,就像使用npm模塊進行開發(fā)一樣,十分方便。EMP 除了具備微前端的能力外,也有跨應用狀態(tài)共享、跨框架組件調用的能力,這是它優(yōu)秀的地方!