Module Federation 联邦模块（下）- 简历与面试

Vue: ^3.3.0
Vue Router: ^4.2.0
Axios: ^1.5.0

shared: {
  vue: {
    singleton: true,  // 强制只有一个实例
    requiredVersion: '^3.3.0'
  }
}

if (sharedModule.version !== expectedVersion) {
  reportWarning('版本冲突', {
    expected: expectedVersion,
    actual: sharedModule.version
  })
}

// 方案1：手动声明类型
// types/remote-modules.d.ts
declare module 'remoteApp1/Button' {
  import { DefineComponent } from 'vue'
  const Button: DefineComponent<{
    type?: 'primary' | 'success' | 'warning' | 'danger'
    text?: string
  }>
  export default Button
}

// 使用
import RemoteButton from 'remoteApp1/Button' // 有类型提示

// 方案2：自动生成类型
// 在远程应用构建时生成类型声明文件
// build-types.js
const { exec } = require('child_process')

exec('vue-tsc --declaration --emitDeclarationOnly', (err, stdout) => {
  if (err) {
    console.error('类型生成失败', err)
    return
  }

  // 将生成的 .d.ts 文件发布到 npm 或 CDN
  console.log('类型生成成功')
})

// 宿主应用安装类型包
npm install @types/remote-app1

// 方案3：使用 @module-federation/typescript
// 自动同步远程模块的类型
npm install @module-federation/typescript

// webpack.config.js
const FederatedTypesPlugin = require('@module-federation/typescript')

plugins: [
  new FederatedTypesPlugin({
    remotes: {
      remoteApp1: 'http://localhost:3001'
    }
  })
]

// 1. 使用 Source Map
// webpack.config.js
module.exports = {
  mode: 'development',
  devtool: 'source-map', // 开启 source map

  output: {
    devtoolModuleFilenameTemplate: '[absolute-resource-path]'
  }
}

// 2. 错误边界
// ErrorBoundary.vue
<template>
  <div v-if="error" class="error-boundary">
    <h2>模块加载失败</h2>
    <p>{{ error.message }}</p>
    <details>
      <summary>详细信息</summary>
      <pre>{{ error.stack }}</pre>
      <p>模块: {{ moduleName }}</p>
      <p>来源: {{ remoteUrl }}</p>
    </details>
    <button @click="retry">重试</button>
  </div>
  <slot v-else></slot>
</template>

<script setup>
import { ref, onErrorCaptured } from 'vue'

const props = defineProps({
  moduleName: String,
  remoteUrl: String
})

const error = ref(null)

onErrorCaptured((err) => {
  error.value = err

  // 上报错误
  reportError({
    type: 'module-federation-error',
    module: props.moduleName,
    remote: props.remoteUrl,
    error: err.message,
    stack: err.stack
  })

  return false
})

const retry = () => {
  error.value = null
  window.location.reload()
}
</script>

// 3. 加载监控
class ModuleFederationMonitor {
  constructor() {
    this.loadTimes = new Map()
  }

  startLoad(moduleName) {
    this.loadTimes.set(moduleName, performance.now())
  }

  endLoad(moduleName, success = true) {
    const startTime = this.loadTimes.get(moduleName)
    if (!startTime) return

    const duration = performance.now() - startTime

    // 上报数据
    this.report({
      module: moduleName,
      duration,
      success,
      timestamp: Date.now()
    })

    this.loadTimes.delete(moduleName)
  }

  report(data) {
    console.log('[MF Monitor]', data)

    // 发送到监控平台
    fetch('/api/monitor/mf', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    })
  }
}

const monitor = new ModuleFederationMonitor()

// 使用
monitor.startLoad('remoteApp1/Button')
import('remoteApp1/Button')
  .then(() => monitor.endLoad('remoteApp1/Button', true))
  .catch(() => monitor.endLoad('remoteApp1/Button', false))

// 1. 预加载关键模块
// webpack.config.js
const PreloadPlugin = require('@vue/preload-webpack-plugin')

plugins: [
  new PreloadPlugin({
    rel: 'prefetch',
    include: 'allAssets',
    fileWhitelist: [/remoteEntry\.js$/]
  })
]

// 2. 并行加载
// 同时加载多个远程模块
Promise.all([
  import('remoteApp1/Button'),
  import('remoteApp1/Header'),
  import('remoteApp2/Table')
]).then(([Button, Header, Table]) => {
  // 所有模块加载完成
})

// 3. 缓存策略
// Service Worker 缓存远程模块
self.addEventListener('fetch', (event) => {
  if (event.request.url.includes('remoteEntry.js')) {
    event.respondWith(
      caches.match(event.request).then((response) => {
        if (response) {
          // 从缓存返回，并在后台更新
          fetch(event.request).then((freshResponse) => {
            caches.open('mf-cache').then((cache) => {
              cache.put(event.request, freshResponse)
            })
          })
          return response
        }

        // 缓存未命中，从网络获取
        return fetch(event.request).then((response) => {
          return caches.open('mf-cache').then((cache) => {
            cache.put(event.request, response.clone())
            return response
          })
        })
      })
    )
  }
})

// 4. CDN 加速
// 将远程模块部署到 CDN
remotes: {
  remoteApp1: 'remoteApp1@https://cdn.example.com/remoteApp1/remoteEntry.js'
}

// 5. 骨架屏
<template>
  <Suspense>
    <template #default>
      <RemoteButton />
    </template>
    <template #fallback>
      <div class="skeleton-button"></div>
    </template>
  </Suspense>
</template>

class DynamicRemoteManager {
  constructor() {
    this.remotes = new Map()
  }

  async addRemote(name, url) {
    if (this.remotes.has(name)) {
      console.warn(`Remote ${name} already exists`)
      return
    }

    // 加载远程入口
    const script = document.createElement('script')
    script.src = url

    await new Promise((resolve, reject) => {
      script.onload = resolve
      script.onerror = reject
      document.head.appendChild(script)
    })

    // 初始化容器
    const container = window[name]
    await container.init(__webpack_share_scopes__.default)

    this.remotes.set(name, {
      name,
      url,
      container
    })

    console.log(`Remote ${name} loaded successfully`)
  }

  async getModule(remoteName, moduleName) {
    const remote = this.remotes.get(remoteName)
    if (!remote) {
      throw new Error(`Remote ${remoteName} not found`)
    }

    const factory = await remote.container.get(moduleName)
    return factory()
  }

  removeRemote(name) {
    this.remotes.delete(name)
  }
}

const remoteManager = new DynamicRemoteManager()

// 运行时添加远程应用
await remoteManager.addRemote(
  'remoteApp3',
  'https://cdn.example.com/remoteApp3/remoteEntry.js'
)

// 使用模块
const Button = await remoteManager.getModule('remoteApp3', './Button')

class VersionNegotiator {
  constructor() {
    this.versionMap = new Map()
  }

  register(packageName, version, provider) {
    if (!this.versionMap.has(packageName)) {
      this.versionMap.set(packageName, [])
    }

    this.versionMap.get(packageName).push({
      version,
      provider,
      timestamp: Date.now()
    })
  }

  negotiate(packageName, requiredVersion) {
    const versions = this.versionMap.get(packageName)
    if (!versions) {
      throw new Error(`Package ${packageName} not found`)
    }

    // 找到满足要求的版本
    const compatible = versions.filter(v =>
      this.isCompatible(v.version, requiredVersion)
    )

    if (compatible.length === 0) {
      console.warn(`No compatible version found for ${packageName}@${requiredVersion}`)
      // 返回最新版本
      return versions[versions.length - 1]
    }

    // 返回最高的兼容版本
    return compatible.reduce((prev, curr) =>
      this.compareVersions(curr.version, prev.version) > 0 ? curr : prev
    )
  }

  isCompatible(version, required) {
    // 简化的 semver 兼容性检查
    const [vMajor, vMinor] = version.split('.').map(Number)
    const [rMajor, rMinor] = required.replace(/[^0-9.]/g, '').split('.').map(Number)

    if (required.startsWith('^')) {
      return vMajor === rMajor && vMinor >= rMinor
    }

    if (required.startsWith('~')) {
      return vMajor === rMajor && vMinor === rMinor
    }

    return version === required
  }

  compareVersions(a, b) {
    const aParts = a.split('.').map(Number)
    const bParts = b.split('.').map(Number)

    for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
      const aPart = aParts[i] || 0
      const bPart = bParts[i] || 0

      if (aPart > bPart) return 1
      if (aPart < bPart) return -1
    }

    return 0
  }
}

const negotiator = new VersionNegotiator()

// 注册版本
negotiator.register('vue', '3.3.4', 'hostApp')
negotiator.register('vue', '3.3.2', 'remoteApp1')

// 协商版本
const result = negotiator.negotiate('vue', '^3.3.0')
console.log('使用版本:', result.version, '来自:', result.provider)

class RemoteModuleHotReload {
  constructor() {
    this.modules = new Map()
    this.listeners = new Map()
  }

  register(moduleName, module, version) {
    this.modules.set(moduleName, {
      module,
      version,
      timestamp: Date.now()
    })
  }

  async checkUpdate(moduleName) {
    // 请求最新版本信息
    const response = await fetch(`/api/modules/${moduleName}/latest`)
    const { version } = await response.json()

    const current = this.modules.get(moduleName)

    if (!current || current.version !== version) {
      console.log(`New version available for ${moduleName}: ${version}`)
      return true
    }

    return false
  }

  async update(moduleName) {
    // 重新加载模块
    const module = await import(`${moduleName}?t=${Date.now()}`)

    const newVersion = module.version || Date.now()
    this.modules.set(moduleName, {
      module,
      version: newVersion,
      timestamp: Date.now()
    })

    // 通知监听器
    const listeners = this.listeners.get(moduleName) || []
    listeners.forEach(listener => listener(module))

    console.log(`Module ${moduleName} updated to version ${newVersion}`)
  }

  onUpdate(moduleName, listener) {
    if (!this.listeners.has(moduleName)) {
      this.listeners.set(moduleName, [])
    }
    this.listeners.get(moduleName).push(listener)
  }

  startPolling(moduleName, interval = 30000) {
    setInterval(async () => {
      const hasUpdate = await this.checkUpdate(moduleName)
      if (hasUpdate) {
        await this.update(moduleName)
      }
    }, interval)
  }
}

const hotReload = new RemoteModuleHotReload()

// 注册模块
hotReload.register('remoteApp1/Button', RemoteButton, '1.0.0')

// 监听更新
hotReload.onUpdate('remoteApp1/Button', (newModule) => {
  console.log('Button 组件已更新')
  // 可以在这里触发组件重新渲染
})

// 开始轮询
hotReload.startPolling('remoteApp1/Button')

【Module Federation 微前端组件库共享实践】2024.07 - 2024.12

项目背景：
公司有 8 个业务系统，使用大量相同的 UI 组件和工具函数，导致代码重复、维护困难、包体积大。需要统一管理公共代码，实现跨应用复用。

技术选型：
经过对比 npm 包、Monorepo、qiankun、Module Federation 等方案，最终选择 Module Federation，原因：
- 模块级粒度，比应用级更灵活
- 运行时共享依赖，包体积最小
- Webpack 5 原生支持，无需额外框架
- 支持动态加载和版本管理

核心工作：

1. 组件库架构设计
   - 将 50+ 通用组件抽离为独立应用（remote-components）
   - 配置 exposes 暴露组件：Button、Form、Table、Modal 等
   - 设计组件 API，保持一致性和易用性
   - 开发组件文档系统，自动生成使用示例

2. 共享依赖优化
   - 配置 shared：Vue、Vue Router、Axios 等设置为单例模式
   - 实现版本协商机制，自动处理版本冲突
   - 制定依赖版本规范，确保各应用版本一致
   - 包体积从平均 2.5MB 降至 1.5MB（减少 40%）

3. 宿主应用改造
   - 改造 8 个业务系统接入 Module Federation
   - 配置 webpack.config.js 的 remotes 和 shared
   - 使用 defineAsyncComponent 实现组件懒加载
   - 处理异步加载、错误降级、加载状态等

4. 性能优化实践
   - 并行加载：多个远程模块同时加载，首屏时间降低 35%
   - CDN 加速：远程模块部署到 CDN，加载速度提升 60%
   - 缓存策略：利用 Service Worker 缓存，二次访问提升 80%
   - 预加载：高频组件提前加载，用户无感知

5. 工程化建设
   - 开发 CLI 工具，快速创建符合规范的远程应用
   - 建立 CI/CD 流程，组件库独立构建部署
   - 实现版本管理：支持多版本并存、灰度发布、快速回滚
   - 建立监控体系：实时监控模块加载性能和成功率

6. 技术难点攻克
   - TypeScript 类型支持：自动生成类型声明文件，发布到 npm
   - 调试困难：开发 Source Map 工具链、错误边界、加载监控
   - 版本冲突：实现智能版本协商系统，自动选择最优版本
   - 热更新：实现远程组件热更新，无需刷新页面

技术栈：
Webpack 5、Module Federation、Vue3、Babel、PostCSS、TypeScript

项目成果：
- 包体积：各系统减少 40%（1MB），首屏速度提升 35%
- 组件复用：复用率 80%，新功能开发时间减少 50%
- 维护成本：组件统一管理，Bug 修复一次全部生效，降低 60%
- 构建速度：单系统构建从 5 分钟降至 2 分钟（提升 60%）
- 发布频率：组件库独立发版，发布频率提升 3 倍
- 用户体验：二次加载速度提升 80%（缓存生效）
- 团队效率：代码复用率从 30% 提升到 80%，节省开发人力 40%