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