Vue 子應用實現：

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

主應用實現

React 實現

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

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

完成，現在已經實現了主應用與子應用的裝載、更新、卸載的操作。現在，它是一個組件，可以同時渲染出多個不同的子應用，這點就比 single-spa 優雅很多。

entry 子應用地址，當然真實情況會根據 dev 和 prod 模式給出不同的地址：

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

Vue 實現

<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 傳給子應用渲染 
    const config = res.default(element); 
    // 調用子應用的裝載方法 
    config.mount?.(props); 
    config.value = config; 
  }); 
}); 
 
onUnmounted(() => { 
  // 調用子應用的卸載方法 
  config.value?.unmount?.(); 
}); 
</script> 
 
<template> 
  <div ref="container"></div> 
</template>

如何讓子應用也能獨立運行

single-spa 等眾多方案，都是將一個變量掛載到 window 上，通過判斷該變量是否處于微前端環境，這樣很不優雅。在 ESM 中，我們可以通過 import.meta.url 傳入參數來判斷：

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

入口導入修改：

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

瀏覽器兼容性

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

模塊公用

我們的子組件必須要使用 mount 、unount 模式嗎?答案是不一定，如果我們的技術棧都是 React 的話。我們的子應用只導出一個 render 就夠了。這樣用的就是同一個 React 來渲染，好處是子應用可以消費父應用的 Provider。但有個前提是兩個應用之間的 React 必須為同一個實例，否則就會報錯。

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

更改 Vite 配置添加 alias：

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

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

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

還有個 importmap 方案，兼容性不太好，但未來是趨勢：

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

父子通信

組件式微應用，可以傳遞參數而通信，完全就是 React 組件通信的模型。

資源路徑

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

在 Vite 的 dev 模式中，子應用里面靜態資源一般會這樣引入：

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

圖片的路徑：/basename/src/logo.svg，在主應用顯示就會 404。因為該路徑只是存在于子應用。我們需要配合 URL 模塊使用，這樣路徑前面會帶上 origin 前綴：

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

當然這樣使用比較繁瑣，我們可以將其封裝為一個 Vite 插件自動處理該場景。

路由同步

項目使用 react-router，那么它可能會存在路由不同步的問題，因為不是同一個 react-router 實例。即路由之間出現不聯動的現象。

在 react-router 支持自定義 history 庫，我們可以創建：

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

最終子應用使用同一份 history 模塊。當然這不是唯一的實現，也不是優雅的方式，我們可以將路由實例 navigate 傳遞給子應用，這樣也能實現路由的交互。

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

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

JS 沙箱

因為沙箱在 ESM 下不支持，因為無法動態改變執行環境中模塊 window 對象，也無法注入新的全局對象。

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

CSS 樣式隔離

自動 CSS 樣式隔離是有代價的，一般我們建議子應用使用不同的 CSS 前綴，再配合 CSS Modules 基本上能實現需求。

打包部署

部署可以根據子應用的 base 放置在不同的目錄，并將名稱對應。配置好 nginx 轉發規則就可以了。我們可以將子應用統一路由前綴，便于 nginx 將主應用區分開并配置通用規則。

比如將主應用放置在 system 目錄，子應用放置在 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; 
} 

優點

1. 簡單 核心不足 100 行代碼，無需多余的文檔

2. 靈活 通過約定的方式接入，也可以漸進增強

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

4. 組件化 組件化的渲染及參數通信

5. 基于 ESM 支持 Vite，面向未來

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

有示例嗎

示例代碼在 Github，感興趣的朋友可以 clone 下來學習。由于我們的技術棧是 React，所以這里示例的主應用的實現用的是 React 。

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

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

結語

微前端的方案適合團隊場景的最好，打造一個團隊能掌控的方案尤為重要。

參考資料：

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