微前端架构支持方案

微前端架构支持方案

微前端架构的核心在于将大型前端应用拆分为多个独立开发、部署和运行的子应用。Vite.js 作为现代前端构建工具，凭借其原生 ESM 支持和快速的开发体验，为微前端实现提供了多种可能性。

基于模块联邦的方案

Vite 通过插件支持模块联邦（Module Federation），这是实现微前端资源共享的关键技术。以下是一个典型配置示例：

// vite.config.js
import { defineConfig } from 'vite'
import federation from '@originjs/vite-plugin-federation'

export default defineConfig({
  plugins: [
    federation({
      name: 'host-app',
      remotes: {
        remoteApp: 'http://localhost:5001/assets/remoteEntry.js'
      },
      shared: ['react', 'react-dom']
    })
  ]
})

这种方案的特点包括：

• 运行时动态加载远程模块
• 共享依赖避免重复打包
• 独立开发部署能力
• 支持版本隔离

iframe 集成方案

虽然传统但稳定的 iframe 方案在 Vite 中同样适用：

<iframe 
  src="http://child-app.com"
  style="width:100%; height:500px; border:none;"
  sandbox="allow-same-origin allow-scripts"
></iframe>

需要注意的细节：

• 使用 sandbox 属性控制安全策略
• 通过 postMessage 实现父子通信
• 样式隔离天然存在
• 性能开销需要考虑

自定义元素方案

Web Components 与 Vite 完美结合：

// child-app/main.js
import { defineCustomElement } from 'vue'
import App from './App.ce.vue'

customElements.define('child-app', defineCustomElement(App))

宿主应用只需直接使用：

<child-app></child-app>

关键优势：

• 真正的技术栈无关
• Shadow DOM 提供样式隔离
• 标准化的浏览器支持
• 生命周期管理简单

构建时组合方案

Vite 支持通过构建插件实现编译期组合：

// vite.config.js
import { defineConfig } from 'vite'
import childApp from 'vite-plugin-child-app'

export default defineConfig({
  plugins: [
    childApp({
      entry: 'path/to/child-app',
      prefix: 'child-'
    })
  ]
})

这种方案的特点：

• 编译时确定依赖关系
• 生成单一部署包
• 构建优化空间大
• 灵活性相对较低

路由级集成方案

基于路由的微前端集成示例：

// host-app/src/micro-fe.js
const apps = {
  'app1': { 
    entry: 'http://localhost:5001',
    container: '#micro-container'
  },
  'app2': {
    entry: 'http://localhost:5002',
    container: '#micro-container'
  }
}

export function loadApp(name) {
  const app = apps[name]
  return import(/* @vite-ignore */ app.entry)
    .then(module => module.mount(app.container))
}

路由配置示例：

import { loadApp } from './micro-fe'

const routes = [
  {
    path: '/app1/*',
    component: () => loadApp('app1')
  },
  {
    path: '/app2/*',
    component: () => loadApp('app2')
  }
]

样式隔离方案

Vite 中实现样式隔离的几种方式：

1. CSS Modules

// child-app/App.vue
<style module>
.container {
  /* 样式自动限定作用域 */
}
</style>

2. Scoped CSS

<style scoped>
/* 自动添加属性选择器 */
</style>

3. 手动前缀

// vite.config.js
export default defineConfig({
  css: {
    modules: {
      generateScopedName: 'child-[name]__[local]'
    }
  }
})

状态管理方案

跨应用状态共享的几种模式：

1. 自定义事件总线

// shared/event-bus.js
import emitter from 'tiny-emitter'
export default new emitter()

2. 共享状态库

// shared/store.js
import { reactive } from 'vue'
export const store = reactive({
  user: null,
  theme: 'light'
})

3. URL 状态同步

// 监听路由变化
watch(route, (newRoute) => {
  if (newRoute.query.theme) {
    store.theme = newRoute.query.theme
  }
})

性能优化策略

Vite 特有的微前端优化手段：

1. 依赖预构建配置

// vite.config.js
optimizeDeps: {
  include: ['shared-vue', 'shared-utils']
}

2. 动态导入优化

const app = await import(/* webpackPreload: true */ `./apps/${name}.js`)

3. 构建输出分析

vite build --report

调试与错误处理

微前端特有的调试技巧：

1. Sourcemap 配置

// vite.config.js
build: {
  sourcemap: 'hidden'
}

2. 错误边界组件

<template>
  <ErrorBoundary>
    <MicroApp />
  </ErrorBoundary>
</template>

<script>
export default {
  errorCaptured(err) {
    logErrorToService(err)
  }
}
</script>

3. 跨应用日志聚合

window.addEventListener('error', (event) => {
  if (event.filename.includes('child-app')) {
    sendToMonitoring(event)
  }
})

部署策略

不同环境下的部署方案：

1. 独立部署

# 子应用
vite build --base=/child-app/

# 宿主应用
vite build --base=/

2. 联合部署

location /child-app/ {
  alias /path/to/child-app/dist/;
  try_files $uri $uri/ /child-app/index.html;
}

3. CDN 部署

// 动态设置publicPath
__webpack_public_path__ = window.childAppCdnUrl

测试策略

微前端特有的测试考虑：

1. 集成测试配置

// playwright.config.js
projects: [
  {
    name: 'host-app',
    testMatch: '**/host/**'
  },
  {
    name: 'child-app',
    testMatch: '**/child/**'
  }
]

2. 契约测试

// shared-api.spec.js
test('共享API契约', () => {
  expect(window.microFE).toHaveProperty('registerApp')
})

3. 视觉回归测试

// image.spec.js
expect(await page.screenshot()).toMatchSnapshot()