🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
一、引言：為何選擇微前端？
在傳統單體前端架構中，隨着業務複雜度增加，代碼臃腫、協作困難、部署效率低等問題愈發突出。微前端通過將項目拆分為多個獨立自治的微應用，解決了這些問題：
- 技術棧無關：支持 Vue、React、Angular 等框架混合開發
- 獨立部署：各團隊可獨立開發、測試、發佈
- 漸進升級：允許逐步重構舊系統
- 動態加載：按需加載減少首屏耗時
本文將以電商後台管理系統為應用場景，對比分析無界（Momentum）與乾坤（Qiankun）兩大框架的實現方式，通過完整示例代碼揭示其核心差異。
二、基礎概念對比
三、實戰示例：電商後台管理系統
場景描述
假設某電商後台包含以下三個核心模塊：
- 商品管理（React 技術棧）
- 訂單處理（Vue 技術棧）
- 用户中心（Angular 技術棧）
主應用提供統一導航和登錄態，各子應用獨立開發部署。
四、主應用配置（通用部分）
1. 創建主應用（Vue 3）
vue create main-app cd main-app npm install momentum-ui # 無界框架 npm install qiankun # 乾坤框架
2. 目錄結構
main-app/ ├── public/ │ └── index.html ├── src/ │ ├── components/ │ │ └── NavBar.vue │ ├── App.vue │ ├── main.js │ └── ... ├── package.json
五、無界框架實現
1. 主應用配置（src/main.js）
import { createApp } from 'vue'
import App from './App.vue'
import NavBar from './components/NavBar.vue'
import { registerMicroApps } from 'momentum-ui'
const app = createApp(App)
app.component('NavBar', NavBar)
app.mount('#app')
// 註冊子應用
registerMicroApps([
{
name: 'product-react',
entry: '//localhost:7100',
activeRule: '/product',
container: '#subapp-container'
},
{
name: 'order-vue',
entry: '//localhost:7101',
activeRule: '/order',
container: '#subapp-container'
}
])
2. 導航組件（src/components/NavBar.vue）
<template>
<nav>
<router-link to="/product">商品管理</router-link>
<router-link to="/order">訂單處理</router-link>
</nav>
</template>
3. 主應用模板（public/index.html）
<body>
<div id="app">
<NavBar />
<div id="subapp-container"></div>
</div>
</body>
六、乾坤框架實現
1. 主應用配置（src/main.js）
import { createApp } from 'vue'
import App from './App.vue'
import NavBar from './components/NavBar.vue'
import { registerMicroApps, start } from 'qiankun'
const app = createApp(App)
app.component('NavBar', NavBar)
app.mount('#app')
// 註冊子應用
registerMicroApps([
{
name: 'product-react',
entry: '//localhost:7100',
activeRule: '/product',
container: '#subapp-container',
props: { allowRouter: true }
},
{
name: 'order-vue',
entry: '//localhost:7101',
activeRule: '/order',
container: '#subapp-container'
}
])
// 啓動乾坤
start()
2. 關鍵區別
- 無界：無需顯式啓動，註冊即自動加載
- 乾坤：需調用
start()激活沙箱環境 - 樣式隔離：無界依賴 WebComponent 影子DOM，乾坤需配置
sandbox: { strictStyleIsolation: true }
七、子應用開發（以 React 子應用為例）
1. 創建子應用
npx create-react-app product-react cd product-react npm install momentum-ui # 或 qiankun
2. 無界適配配置
// src/index.js (無界)
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
if (window.__POWERED_BY_MOMENTUM__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_MOMENTUM__
}
ReactDOM.render(<App />, document.getElementById('root'))
3. 乾坤適配配置
// src/index.js (乾坤)
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
let instance = null
function render(props) {
ReactDOM.render(<App {...props} />, document.getElementById('root'))
}
if (!window.__POWERED_BY_QIANKUN__) {
render()
}
export async function bootstrap() {
console.log('React 子應用啓動')
}
export async function mount(props) {
console.log('React 子應用掛載')
render(props)
}
export async function unmount() {
ReactDOM.unmountComponentAtNode(instance.container.querySelector('#root'))
console.log('React 子應用卸載')
}
八、核心特性對比
1. 樣式隔離
- 無界：利用 WebComponent 的影子DOM自動隔離樣式
- 乾坤：需開啓嚴格樣式隔離（
sandbox: { strictStyleIsolation: true }），否則可能污染全局樣式
2. JS 沙箱
- 無界：通過 iframe 天然隔離，但跨幀通信成本較高
- 乾坤：採用函數代理沙箱，性能更優但需注意變量泄漏
3. 動態路由
- 無界：支持動態註冊路由，適合頻繁變化的導購系統
- 乾坤：依賴主應用路由配置，更適合固定入口的場景
九、生產環境部署要點
-
構建順序：
- 先構建主應用，再依次構建子應用
- 使用帶哈希的指紋版本避免緩存問題
-
Nginx 配置示例：
server {
listen 80;
location / {
root /path/to/main-app/dist;
try_files $uri $uri/ /index.html;
}
location /product/ {
proxy_pass http://localhost:7100;
}
location /order/ {
proxy_pass http://localhost:7101;
}
}
- 跨域處理：
- 子應用需設置
Access-Control-Allow-Origin - 推薦使用 CDN 加速靜態資源加載
- 子應用需設置
十、總結與選擇建議
通過本文的對比與實戰演示，開發者可根據項目規模、技術複雜度、團隊協作需求選擇合適的微前端框架。建議從無界入手體驗微前端優勢，待業務擴展後再逐步遷移至乾坤。
