微前端介紹

• 脫離基座模式，每個應用之間都可以彼此分享資源。
• 如基於Webpack 5 Module Federation(模塊聯邦，mf，提供了能在當前應用中遠程加載其他服務器上應用的能力)。
• 實現的EMP微前端方案，可以實現多個應用彼此共享資源分享。

iframe雖然基本能做到微前端所要做的所有事情，但它的最大問題也在於他的隔離性無法被突破，導致應用間上下文無法被共享，隨之帶來開發體驗、產品體驗的問題。

• 技術棧無關：Web Components是瀏覽器原生組件，那即是在任何框架中都可以使用。
• 獨立開發：使用Web Components開發的應用無需與其他應用間產生任何關聯。
• 應用間隔離： Shadow DOM的特性，各個引入的微應用間可以達到相互隔離的效果。綜上所述，Web Components是有能力以組件加載的方式將微應用整合在一起作為微前端的一種手段，但不幸的是，Web Components是瀏覽器的新特性，所以它的兼容性不是很好，如果有兼容性要求的項目還是無法使用，具體請查看can i use。

• 無技術棧限制：ESM加載的只是js內容，無論哪個框架，最終都要編譯成js，因此，無論哪種框架，ESM都能加載。
• 應用單獨開發： ESM只是js的一種規範，不會影響應用的開發模式。
• 多應用整合： 只要將微應用以ESM的方式暴露出來，就能正常加載。
• 遠程加載模塊：ESM能夠直接請求cdn資源，這是它與生俱來的能力。
• ESM是能做到微前端的核心思想，但是它也存在著兼容性這一大弊端，儘管ESM已經很優秀了，但是大部分老版的瀏覽器仍然無法直接使用，這也是babel等編譯工具出現的原因，幸運的是，他可以通過webpack、rollup、esbuild、snowpack等編譯工具成為兼容性的代碼。

• 基於single-spa封裝，提供了更加開箱即用的 API
• 技術棧無關，任意技術棧的應用均可 使用/接入，不論是 React/Vue/Angular/JQuery 還是其他等框架
• HTML Entry 接入方式，讓你接入微應用像使用 iframe 一樣簡單
• 樣式隔離，確保微應用之間樣式互相不干擾
• JS 沙箱，確保微應用之間 全局變量/事件 不衝突
• 資源預加載，在瀏覽器空閒時間預加載未打開的微應用資源，加速微應用打開速度 umi 插件，提供了 @umijs/plugin-qiankun 供 umi 應用一鍵切換成微前端架構系統 除了最後一點拓展以外，微前端想要達到的效果都已經達到。

尚不支持Angular

• 基於Webpack5的新特性Module Federation實現，達到第三方依賴共享，減少不必要的代碼引入的目的，什麼是Module Federation這裡就不再贅述。
• 每個微應用獨立部署運行，並通過cdn的方式引入主程序中，因此只需要部署一次，便可以提供給任何基於Module Federation的應用使用。並且此部分代碼是遠程引入，無需參與應用的打包。
• 動態更新微應用：EMP是通過cdn加載微應用，因此每個微應用中的代碼有變動時，無需重新打包發布新的整合應用便能加載到最新的微應用。
• 去中心化，每個微應用間都可以引入其他的微應用，無中心應用的概念。
• 跨技術棧組件式調用，提供了在主應用框架中可以調用其他框架組件的能力（目前已支持互相調用的框架及使用方式請參閱官方文檔）。
• 按需加載，開發者可以選擇只加載微應用中需要的部分，而不是強制只能將整個應用全部加載。
• 應用間通信，每一個應用都可以進行狀態共享，就像在使用npm模塊進行開發一樣便捷。
• 生成對應技術棧模板，它能像create-react-app一樣，也能像create-vue-app一樣，通過指令一鍵搭建好開發環境，減少開發者的負擔。
• 遠程拉取ts聲明文件，emp-cli中內置了拉取遠程應用中代碼聲明文件的能力，讓使用ts開發的開發者不再為代碼報錯而煩惱。