深入調研了微前端，還是 iframe 最香

微前端是什麼

微前端是一種類似於微服務的架構，它將微服務的理念應用於瀏覽器端，即將 Web 應用由單一的單體應用轉變爲多個小型前端應用聚合爲一的應用。各個前端應用還可以獨立運行、獨立開發、獨立部署。

簡單來說，就是利用一系列工具和技術，將各個團隊的 UI 頁面 組裝成用戶可以連貫的應用程序。

後端解耦，前端聚合

採用微服務的原因主要還是在於，使用微服務架構來解耦服務間依賴。

而在前端微服務化上，則是恰恰與之相反的，人們更想要的結果是聚合，尤其是那些 To B（to Bussiness）的應用。

在這兩三年裏，移動應用出現了一種趨勢，用戶不想裝那麼多應用了。而往往一家大的商業公司，會提供一系列的應用。這些應用也從某種程度上，反應了這家公司的組織架構。然而，在用戶的眼裏他們就是一家公司，他們就只應該有一個產品。相似的，這種趨勢也在桌面 Web 出現。聚合成爲了一個技術趨勢，體現在前端的聚合就是微服務化架構。

目的

優點

缺點

微前端實施方式

路由分發式微前端

通過路由將不同的業務分發到不同的、獨立前端應用上。其通常可以通過 HTTP 服務器的反向代理來實現，又或者是應用框架自帶的路由來解決。

http {
  server {
    listen       80;
    server_name  www.phodal.com;
    location /api/ {
      proxy_pass http://http://172.31.25.15:8000/api;
    }
    location /web/admin {
      proxy_pass http://172.31.25.29/web/admin;
    }
    location /web/notifications {
      proxy_pass http://172.31.25.27/web/notifications;
    }
    location / {
      proxy_pass /;
    }
  }
}

iframe

顧名思義, 通過 iframe 加載子應用。通信可以通過 postMessage 進行通信。

優點

缺點

ajax

ajax 請求服務端，直接在主頁面區域返回拼裝好的 html

優點

缺點

web component

將前端應用程序分解爲自定義 HTML 元素。基於 CustomEvent 實現通信
Shadow DOM 天生的作用域隔離

重寫現有的前端應用，使用 Web Components 來完成整個系統的功能。

single-spa

qiankun

qiankun 基於 single-spa 進行了二次開發

無界

使用 iframe 有三個難以解決的問題，

無界微前端框架通過繼承 iframe 的優點，解決 iframe 的缺點，打造一個接近完美的 iframe 方案

在應用 A 中構造一個 shadow 和 iframe，然後將應用 B 的 html 寫入 shadow 中，js 運行在 iframe 中，注意 iframe 的 url，iframe 保持和主應用同域但是保留子應用的路徑信息，這樣子應用的 js 可以運行在 iframe 的 location 和 history 中保持路由正確。

在 iframe 中攔截 document 對象，統一將 dom 指向 shadowRoot，此時比如新建元素、彈窗或者冒泡組件就可以正常約束在 shadowRoot 內部。

iframe+ web component

Shadow DOM 是 Web Components 技術的一部分，它允許開發者創建封裝、可複用的組件。當一個元素使用 Shadow DOM 創建時，它會包含一個 Shadow Root，這是一個獨立的 DOM 子樹，與文檔中的其他部分相互隔離，可以在其中定義和控制樣式和行爲。因此，Shadow DOM 的插拔機制也是非常重要的。

在 Shadow DOM 中，插入和移除節點的過程稱爲 “插拔”。Shadow DOM 提供了以下方法來實現插拔：

需要注意的是，在 Shadow DOM 中，被插入到 Shadow Root 中的元素有可能難以再次獲取或操作，因爲它們可能不會出現在文檔的正常 DOM 樹中。爲了解決這個問題，我們可以使用 getElementById() 或 querySelector() 等方法，或者在創建自定義元素時定義自定義方法。

渲染子應用步驟

micro app

micro-app 並沒有沿襲 single-spa 的思路，而是借鑑了 WebComponent 的思想，通過 CustomElement 結合自定義的 ShadowDom，將微前端封裝成一個類 WebComponent 組件，從而實現微前端的組件化渲染。並且由於自定義 ShadowDom 的隔離特性，micro-app 不需要像 single-spa 和 qiankun 一樣要求子應用修改渲染邏輯並暴露出方法，也不需要修改 webpack 配置，是目前市面上接入微前端成本最低的方案。、

它在 基座應用 和 子應用 之間充當橋樑膠水的作用。

接入方式

import microApp from '@micro-zoe/micro-app';
microApp.start();

export function MyPage () {
  return (
  <div>
    <h1>子應用</h1>
    <micro-app
      name='app1' // name(必傳)：應用名稱
      url='http://localhost:3000/' // url(必傳)：應用地址，會被自動補全爲http://localhost:3000/index.html
      baseroute='/my-page' // baseroute(可選)：基座應用分配給子應用的基礎路由，就是上面的 `/my-page`
      ></micro-app>
  </div>
  )
}

加載子應用過程

microApp.start() 後，會註冊一個名爲 micro-app 的自定義 webComponent標籤。

通過 fetch 拿到 url 對應的 html 字符串，然後替換 head 和 body 標籤爲自定義標籤，避免污染主應用 micro-app-head micro-app-body

htmlstr.replace(/<head/i, '<micro-app-head')
htmlstr.replace(/<body/i, '<micro-app-body')

處理 link 標籤

處理 style 標籤

例如：
.test { height: 100px; }

添加前綴後變爲：
micro-app[name=xxx] .test { height: 100px; }

處理 script 標籤

掛載子應用

綁定沙箱

隔離

MicroApp 借鑑了 qiankun 的 js 沙箱和樣式隔離方案，這也是目前應用廣泛且成熟的方案。

微前端藍圖

新團隊組建後，首先不得不完成很多設置工作，例如創建一個基本的應用程序，梳理構建流程以及其他繁瑣的任務

而共用前端藍圖這一概念能夠幫助我們解決上述問題。藍圖實際上是一個示例項目，其中包括微前端項目需要的所有重要部分。可以將藍圖劃分爲兩大類：技術和項目細節

技術細節

上述這些方向是所有項目都必須要考慮的，但並不具有很大的挑戰性。大多數主流框架都提供了腳手架工具，能爲你生成一個示例項目，但是對於一個團隊來說，僅使用默認的前端配置是遠遠不夠的。

項目細節

你的前端代碼需要和其他團隊進行整合，並且整合必須遵循整體架構的指南。全新的前端項目必須要考慮項目的一些細節。因此，我們的藍圖還應包括：

新加入團隊可以複製上面的藍圖，根據實際需要稍加改動，即可變成他們自己的藍圖。基於現有藍圖進行開發能夠大大的節約時間。

參考鏈接

https://www.modb.pro/db/610768

https://qiankun.umijs.org/zh/cookbook

https://microfrontends.cn/

https://zhuanlan.zhihu.com/p/378346507

https://zhuanlan.zhihu.com/p/442815952

https://juejin.cn/post/7215967453913317434

https://juejin.cn/post/7125646119727529992#heading-5

https://segmentfault.com/a/1190000040462400

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/He2q9jlfVE9OBpyJWyGmoA

猜你喜歡