微前端-理論

微前端

What

  • 微前端就是將不同的功能按照不同的維度拆分成多個子應(yīng)用，通過主應(yīng)用來加載這些子應(yīng)用；
  • 微前端的核心在于拆，拆完后再合；

Why

  • 傳統(tǒng)項目隨著業(yè)務(wù)發(fā)展，變得龐大之后，編譯打包速度變慢；
  • 分割出來的獨立業(yè)務(wù)模塊，無法團隊獨立開發(fā)，獨立部署；
  • 多個團隊，多種技術(shù)棧如何整合？
  • 項目中老的應(yīng)用代碼仍需要使用
    可以將一個應(yīng)用拆分成多個子應(yīng)用，將子應(yīng)用打包成一個個的lib。當(dāng)路徑切換時加載不同的子應(yīng)用。這樣每個子應(yīng)用都是獨立的，技術(shù)棧也不用做限制了，也解決了獨立部署協(xié)同合作的開發(fā)等問題

How

compare
  • 2018年 Single-SPA 誕生了，single-spa 是一個用于前端微服務(wù)化的JavaScript前端解決方案（本身沒有處理樣式隔離，js執(zhí)行隔離）實現(xiàn)了路由劫持和應(yīng)用加載
  • 2019年 qiankun 基于 single-spa 提供了更加開箱即用的 API（single-spa + sandbox + import-html-entry）做到了，技術(shù)棧無關(guān)、并且接入簡單（像 iframe 一樣簡單）
    子應(yīng)用可以獨立構(gòu)建，運行時動態(tài)加載。主子應(yīng)用完全解耦，技術(shù)棧無關(guān)，靠的是協(xié)議接入（子應(yīng)用必須導(dǎo)出bootstrap、mount、unmount方法）
iframe
  • iframe中的子應(yīng)用切換路由時，用戶刷新頁面就尷尬了，整個頁面狀態(tài)就丟失了？qinkun的刷新頁面，狀態(tài)不會丟失？
  • 為什么不iframe
應(yīng)用通信
  • URL傳參
  • 基于CustomeEvent
  • 基于props主子應(yīng)用通信
  • 使用全局變量（window上掛載等）、Redux 進行通信
公共依賴
  • CDN -externals
  • webpack 聯(lián)邦模式？
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容