Module Federation 集成

Module Federation 允许不同应用之间动态共享模块代码。

安装插件

Bash

npm add -D @originjs/vite-plugin-federation

主应用配置

JavaScript

import federation from '@originjs/vite-plugin-federation'

export default defineConfig({
  plugins: [
    federation({
      name: 'host-app',
      remotes: {
        // 远程子应用
        subAppA: 'http://localhost:3001/assets/remoteEntry.js',
        subAppB: 'http://localhost:3002/assets/remoteEntry.js'
      },
      shared: ['vue', 'vue-router']  // 共享依赖
    })
  ]
})

子应用配置

JavaScript

import federation from '@originjs/vite-plugin-federation'

export default defineConfig({
  plugins: [
    federation({
      name: 'subAppA',
      filename: 'remoteEntry.js',
      exposes: {
        // 暴露模块
        './Button': './src/components/Button.vue',
        './utils': './src/utils/index.js'
      },
      shared: ['vue']
    })
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  }
})

注意：子应用需 exposes 暴露模块供主应用使用。

主应用使用远程模块

JavaScript

// 导入远程模块
import Button from 'subAppA/Button'
import { formatDate } from 'subAppA/utils'

// 在组件中使用
<Button />

配置说明

配置项	说明
name	应用名称
remotes	远程应用入口
exposes	暴露的模块
shared	共享的依赖

共享依赖配置

JavaScript

shared: {
  vue: {
    singleton: true,   # 单例模式
    requiredVersion: '^3.0.0'
  },
  lodash: {
    eager: true  # 提前加载
  }
}

构建产物

Bash

主应用 dist/
├── assets/
│   ├── index.js
│   └── remoteEntry.js  # 联邦入口

子应用 dist/
├── assets/
│   ├── remoteEntry.js  # 暴露入口
│   ├── Button.js       # 暴露模块
│   └── utils.js

运行顺序

JavaScript

# 先构建子应用
cd subAppA && npm run build

# 再构建主应用
cd host && npm run build

开发模式调试

text

export default defineConfig({
  plugins: [
    federation({
      // 开发模式指向本地开发服务器
      remotes: {
        subAppA: 'http://localhost:3001/assets/remoteEntry.js'
      }
    })
  ]
})

要点总结

@originjs/vite-plugin-federation 实现模块联邦
remotes 配置远程应用入口
exposes 暴露本地模块
shared 共享依赖避免重复