Vue 子應(yīng)用實(shí)現(xiàn)：

import { createApp } from 'vue'; 
import App from './App.vue'; 
 
export default (container: HTMLElement) => { 
  // 創(chuàng)建 
  const app = createApp(App); 
  return { 
    mount() { 
      // 裝載 
      app.mount(container); 
    }, 
    unmount() { 
      // 卸載 
      app.unmount(); 
    }, 
  }; 
}; 

主應(yīng)用實(shí)現(xiàn)

React 實(shí)現(xiàn)

其核心代碼僅十余行，主要處理與子應(yīng)用交互 (為了易讀性，隱藏了錯(cuò)誤處理代碼)：

export function MicroApp({ entry, ...props }: MicroAppProps) { 
  // 傳遞給子應(yīng)用的節(jié)點(diǎn) 
  const containerRef = useRef<HTMLDivElement>(null); 
  // 子應(yīng)用配置 
  const configRef = useRef<AppConfig>(); 
 
  useLayoutEffect(() => { 
    import(/* @vite-ignore */ entry).then((res) => { 
      // 將 div 傳給子應(yīng)用渲染 
      const config = res.default(containerRef.current); 
      // 調(diào)用子應(yīng)用的裝載方法 
      config.mount?.(props); 
      configRef.current = config; 
    }); 
    return () => { 
      // 調(diào)用子應(yīng)用的卸載方法 
      configRef.current?.unmount?.(); 
      configRef.current = undefined; 
    }; 
  }, [entry]); 
 
  return <div ref={containerRef}>{configRef.current?.render?.(props)}</div>; 
} 

完成，現(xiàn)在已經(jīng)實(shí)現(xiàn)了主應(yīng)用與子應(yīng)用的裝載、更新、卸載的操作。現(xiàn)在，它是一個(gè)組件，可以同時(shí)渲染出多個(gè)不同的子應(yīng)用，這點(diǎn)就比 single-spa 優(yōu)雅很多。

entry 子應(yīng)用地址，當(dāng)然真實(shí)情況會(huì)根據(jù) dev 和 prod 模式給出不同的地址：

<MicroApp className="micro-app" entry="//localhost:3002/src/main.tsx" /> 

Vue 實(shí)現(xiàn)

<script setup lang="ts"> 
import { onMounted, onUnmounted, ref } from 'vue'; 
 
const { entry, ...props } = defineProps<{ entry: string }>(); 
const container = ref<HTMLDivElement | null>(null); 
const config = ref(); 
 
onMounted(() => { 
  const element = container.value; 
  import(/* @vite-ignore */ entry).then((res) => { 
    // 將 div 傳給子應(yīng)用渲染 
    const config = res.default(element); 
    // 調(diào)用子應(yīng)用的裝載方法 
    config.mount?.(props); 
    config.value = config; 
  }); 
}); 
 
onUnmounted(() => { 
  // 調(diào)用子應(yīng)用的卸載方法 
  config.value?.unmount?.(); 
}); 
</script> 
 
<template> 
  <div ref="container"></div> 
</template>

如何讓子應(yīng)用也能獨(dú)立運(yùn)行

single-spa 等眾多方案，都是將一個(gè)變量掛載到 window 上，通過(guò)判斷該變量是否處于微前端環(huán)境，這樣很不優(yōu)雅。在 ESM 中，我們可以通過(guò) import.meta.url 傳入?yún)?shù)來(lái)判斷：

if (!import.meta.url.includes('microAppEnv')) { 
  ReactDOM.render( 
    <React.StrictMode> 
      <App /> 
    </React.StrictMode>, 
    document.getElementById('root'), 
  ); 
} 

入口導(dǎo)入修改：

// 添加環(huán)境參數(shù)和當(dāng)前時(shí)間避免被緩存 
import(/* @vite-ignore */ `${entry}?microAppEnv&t=${Date.now()}`); 

瀏覽器兼容性

IE 瀏覽器已經(jīng)逐步退出我們的視野，基于 Vite，我們只需要支持 import 的特性瀏覽器就夠了。當(dāng)然，如果考慮 IE 瀏覽器的話也不是不可以，很簡(jiǎn)單：將上面代碼的 import 替換為 System.import 即 systemjs，也是 single-spa 的所推崇的用法。

模塊公用

我們的子組件必須要使用 mount 、unount 模式嗎?答案是不一定，如果我們的技術(shù)棧都是 React 的話。我們的子應(yīng)用只導(dǎo)出一個(gè) render 就夠了。這樣用的就是同一個(gè) React 來(lái)渲染，好處是子應(yīng)用可以消費(fèi)父應(yīng)用的 Provider。但有個(gè)前提是兩個(gè)應(yīng)用之間的 React 必須為同一個(gè)實(shí)例，否則就會(huì)報(bào)錯(cuò)。

我們可以將 react、react-dom 、styled-componets 等常用模塊提前打包成 ESM 模塊，然后放到文件服務(wù)中使用。

更改 Vite 配置添加 alias：

defineConfig({ 
  resolve: { 
    alias: { 
      react: '//localhost:8000/react@17.js', 
      'react-dom': '//localhost:8000/react-dom@17.js', 
    }, 
  }, 
}); 

這樣就能愉快地使用同一份 React 代碼了。還能抽離出主應(yīng)用和子應(yīng)用之間的公用模塊，讓應(yīng)用總體積更小。當(dāng)然如果沒(méi)上 http2 的話，就需要考慮顆粒度的問(wèn)題了。

在線 CDN 方案：https://esm.sh

還有個(gè) importmap 方案，兼容性不太好，但未來(lái)是趨勢(shì)：

<script type="importmap"> 
  { 
    "imports": { 
      "react": "//localhost:8000/react@17.js" 
    } 
  } 
</script> 

父子通信

組件式微應(yīng)用，可以傳遞參數(shù)而通信，完全就是 React 組件通信的模型。

資源路徑

import logo from './images/logo.svg'; 
 
<img src={logo} />; 

在 Vite 的 dev 模式中，子應(yīng)用里面靜態(tài)資源一般會(huì)這樣引入：

import logo from './images/logo.svg'; 
 
<img src={logo} />; 

圖片的路徑：/basename/src/logo.svg，在主應(yīng)用顯示就會(huì) 404。因?yàn)樵撀窂街皇谴嬖谟谧討?yīng)用。我們需要配合 URL 模塊使用，這樣路徑前面會(huì)帶上 origin 前綴：

const logoURL = new URL(logo, import.meta.url); 
 
<img src={logoURL.href} />; 

當(dāng)然這樣使用比較繁瑣，我們可以將其封裝為一個(gè) Vite 插件自動(dòng)處理該場(chǎng)景。

路由同步

項(xiàng)目使用 react-router，那么它可能會(huì)存在路由不同步的問(wèn)題，因?yàn)椴皇峭粋€(gè) react-router 實(shí)例。即路由之間出現(xiàn)不聯(lián)動(dòng)的現(xiàn)象。

在 react-router 支持自定義 history 庫(kù)，我們可以創(chuàng)建：

import { createBrowserHistory } from 'history'; 
 
export const history = createBrowserHistory(); 
 
// 主應(yīng)用：路由入口 
<HistoryRouter history={history}>{children}</HistoryRouter>; 
 
// 主應(yīng)用：傳遞給子應(yīng)用 
<Route 
  path="/child-app/*" 
  element={<MicroApp entry="//localhost:3002/src/main.tsx" history={history} />} 
/>; 
 
// 子應(yīng)用：路由入口 
<HistoryRouter basename="/child-app" history={history}> 
  {children} 
</HistoryRouter>; 

最終子應(yīng)用使用同一份 history 模塊。當(dāng)然這不是唯一的實(shí)現(xiàn)，也不是優(yōu)雅的方式，我們可以將路由實(shí)例 navigate 傳遞給子應(yīng)用，這樣也能實(shí)現(xiàn)路由的交互。

注意：子應(yīng)用的 basename 必須與主應(yīng)用的 path 名稱保持一致。這里還需要修改 Vite 的配置 base 字段：

export default defineConfig({ 
  base: '/child-app/', 
  server: { 
    port: 3002, 
  }, 
  plugins: [react()], 
}); 

JS 沙箱

因?yàn)樯诚湓?ESM 下不支持，因?yàn)闊o(wú)法動(dòng)態(tài)改變執(zhí)行環(huán)境中模塊 window 對(duì)象，也無(wú)法注入新的全局對(duì)象。

一般 React、Vue 項(xiàng)目也很少修改全局變量，做好代碼規(guī)范檢查才是最主要的。

CSS 樣式隔離

自動(dòng) CSS 樣式隔離是有代價(jià)的，一般我們建議子應(yīng)用使用不同的 CSS 前綴，再配合 CSS Modules 基本上能實(shí)現(xiàn)需求。

打包部署

部署可以根據(jù)子應(yīng)用的 base 放置在不同的目錄，并將名稱對(duì)應(yīng)。配置好 nginx 轉(zhuǎn)發(fā)規(guī)則就可以了。我們可以將子應(yīng)用統(tǒng)一路由前綴，便于 nginx 將主應(yīng)用區(qū)分開并配置通用規(guī)則。

比如將主應(yīng)用放置在 system 目錄，子應(yīng)用放置在 app- 開頭的目錄：

location ~ ^\/app-.*(\..+)$ { 
    root /usr/share/nginx/html; 
} 
 
location / { 
    try_files $uri $uri/ /index.html; 
    root /usr/share/nginx/html/system; 
    index  index.html index.htm; 
} 

優(yōu)點(diǎn)

1. 簡(jiǎn)單 核心不足 100 行代碼，無(wú)需多余的文檔

2. 靈活 通過(guò)約定的方式接入，也可以漸進(jìn)增強(qiáng)

3. 透明 無(wú)任何劫持方案，更多邏輯透明性

4. 組件化 組件化的渲染及參數(shù)通信

5. 基于 ESM 支持 Vite，面向未來(lái)

6. 向下兼容 可選 SystemJS 方案，兼容低版本瀏覽器

有示例嗎

示例代碼在 Github，感興趣的朋友可以 clone 下來(lái)學(xué)習(xí)。由于我們的技術(shù)棧是 React，所以這里示例的主應(yīng)用的實(shí)現(xiàn)用的是 React 。

微前端組件(React)：https://github.com/MinJieLiu/micro-app

微前端示例：https://github.com/MinJieLiu/micro-app-demo

結(jié)語(yǔ)

微前端的方案適合團(tuán)隊(duì)場(chǎng)景的最好，打造一個(gè)團(tuán)隊(duì)能掌控的方案尤為重要。

參考資料：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import.meta

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import