微前端 Module Federation 2.0 实战：跨团队协作的终极方案

1
// Webpack 生成的运行时代码（简化版）
2
__webpack_require__.l = (url, done) => {
3
  // 创建 script 标签加载远程入口
4
  const script = document.createElement('script');
5
  script.src = url;
6
  script.onload = done;
7
  document.head.appendChild(script);
8
};
9

10
// 初始化远程容器
11
const initRemote = async (remoteName, shareScope) => {
12
  const container = window[remoteName];
13
  if (!container.__initialized) {
14
    await container.init(shareScope);
15
    container.__initialized = true;
16
  }
17
  return container;
18
};
19

20
// 获取远程模块
21
const getModule = async (remoteName, modulePath) => {
22
  const container = await initRemote(remoteName, __webpack_share_scopes__.default);
23
  const factory = await container.get(modulePath);
24
  return factory();
25
};

1
// webpack.config.js - Host 配置
2
const { ModuleFederationPlugin } = require('webpack').container;
3

4
module.exports = {
5
  plugins: [
6
    new ModuleFederationPlugin({
7
      name: 'host',
8
      remotes: {
9
        app1: 'app1@http://localhost:3001/remoteEntry.js',
10
        app2: 'app2@http://localhost:3002/remoteEntry.js',
11
      },
12
      shared: {
13
        vue: {
14
          singleton: true,       // 全局只加载一个版本
15
          requiredVersion: '^3.4.0',
16
          eager: false,          // 异步加载
17
        },
18
        'vue-router': {
19
          singleton: true,
20
          requiredVersion: '^4.3.0',
21
        },
22
        pinia: {
23
          singleton: true,
24
          requiredVersion: '^2.1.0',
25
        },
26
      },
27
    }),
28
  ],
29
};

1
// 版本协商的运行时伪代码
2
const resolveSharedVersion = (shareScope, packageName) => {
3
  const versions = shareScope[packageName];
4
  // versions 示例:
5
  // {
6
  //   '3.4.21': { get: () => ..., from: 'host', eager: false },
7
  //   '3.3.8':  { get: () => ..., from: 'app1', eager: false },
8
  //   '3.5.1':  { get: () => ..., from: 'app2', eager: false },
9
  // }
10

11
  if (config.singleton) {
12
    // 找到满足所有 requiredVersion 的最高版本
13
    const sorted = Object.keys(versions).sort(semver.rcompare);
14
    for (const version of sorted) {
15
      if (allConstraintsSatisfied(version, constraints)) {
16
        return versions[version];
17
      }
18
    }
19
    // 没有完全满足的，用最高版本并发出警告
20
    console.warn(`Unsatisfied version ${sorted[0]} for shared ${packageName}`);
21
    return versions[sorted[0]];
22
  }
23

24
  // 非 singleton: 返回满足当前应用约束的最佳版本
25
  return findBestMatch(versions, currentAppConstraint);
26
};

1
// 场景：Remote 需要 vue@3.5，但 Host 只有 vue@3.4
2
// 解决方案 1: 放宽版本约束
3
shared: {
4
  vue: {
5
    singleton: true,
6
    requiredVersion: '^3.3.0', // 放宽到 3.3+
7
  },
8
}
9

10
// 解决方案 2: 允许 fallback
11
shared: {
12
  vue: {
13
    singleton: true,
14
    requiredVersion: '^3.5.0',
15
    strictVersion: false, // 不满足时不报错，降级使用可用版本
16
  },
17
}
18

19
// 解决方案 3: eager 加载确保版本优先
20
shared: {
21
  vue: {
22
    singleton: true,
23
    requiredVersion: '^3.5.0',
24
    eager: true, // 在入口 chunk 中直接打包，确保此版本优先被注册
25
  },
26
}

1
// 方案二：封装通用的动态远程加载器
2
class DynamicRemoteLoader {
3
  constructor() {
4
    this.remoteCache = new Map();
5
    this.loadingPromises = new Map();
6
  }
7

8
  /**
9
   * 动态加载远程模块
10
   * @param {string} remoteName - 远程应用名称
11
   * @param {string} remoteUrl - remoteEntry.js 的 URL
12
   * @param {string} modulePath - 模块路径，如 './Button'
13
   */
14
  async loadModule(remoteName, remoteUrl, modulePath) {
15
    // 确保远程容器已加载
16
    const container = await this.loadRemoteContainer(remoteName, remoteUrl);
17

18
    // 初始化共享作用域
19
    await this.initContainer(container);
20

21
    // 获取模块
22
    const factory = await container.get(modulePath);
23
    return factory();
24
  }
25

26
  async loadRemoteContainer(remoteName, remoteUrl) {
27
    if (this.remoteCache.has(remoteName)) {
28
      return this.remoteCache.get(remoteName);
29
    }
30

31
    // 防止重复加载
32
    if (!this.loadingPromises.has(remoteName)) {
33
      this.loadingPromises.set(remoteName, this.doLoadScript(remoteName, remoteUrl));
34
    }
35

36
    const container = await this.loadingPromises.get(remoteName);
37
    this.remoteCache.set(remoteName, container);
38
    this.loadingPromises.delete(remoteName);
39
    return container;
40
  }
41

42
  doLoadScript(remoteName, url) {
43
    return new Promise((resolve, reject) => {
44
      const script = document.createElement('script');
45
      script.src = url;
46
      script.type = 'text/javascript';
47
      script.async = true;
48

49
      script.onload = () => {
50
        const container = window[remoteName];
51
        if (container) {
52
          resolve(container);
53
        } else {
54
          reject(new Error(`Remote container ${remoteName} not found on window`));
55
        }
56
      };
57

58
      script.onerror = (err) => {
59
        reject(new Error(`Failed to load remote ${remoteName} from ${url}`));
60
      };
61

62
      document.head.appendChild(script);
63
    });
64
  }
65

66
  async initContainer(container) {
67
    if (container.__initialized) return;
68

69
    // 获取 webpack 的共享作用域
70
    // @ts-ignore
71
    const shareScope = __webpack_share_scopes__;
72
    if (!shareScope.default) {
73
      // @ts-ignore
74
      await __webpack_init_sharing__('default');
75
    }
76
    await container.init(shareScope.default);
77
    container.__initialized = true;
78
  }
79
}
80

81
// 使用示例
82
const loader = new DynamicRemoteLoader();
83

84
// 根据配置中心动态加载
85
const config = await fetch('/api/micro-app-config').then(r => r.json());
86
// config = { name: 'dashboard', url: 'https://cdn.example.com/dashboard/remoteEntry.js' }
87

88
const DashboardModule = await loader.loadModule(
89
  config.name,
90
  config.url,
91
  './DashboardWidget'
92
);

1
// webpack.config.js - MF 2.0 增强配置
2
const { ModuleFederationPlugin } = require('@module-federation/enhanced');
3

4
module.exports = {
5
  plugins: [
6
    new ModuleFederationPlugin({
7
      name: 'host_app',
8
      remotes: {
9
        remote_app: 'remote_app@http://localhost:3001/mf-manifest.json',
10
      },
11
      shared: {
12
        vue: { singleton: true, requiredVersion: '^3.4.0' },
13
      },
14
      // 2.0 新增：运行时插件
15
      runtimePlugins: [
16
        require.resolve('./mf-runtime-plugin'),
17
      ],
18
    }),
19
  ],
20
};

1
// mf-manifest.json（自动生成）
2
{
3
  "id": "remote_app",
4
  "name": "remote_app",
5
  "metaData": {
6
    "name": "remote_app",
7
    "buildInfo": {
8
      "buildVersion": "1.0.0",
9
      "buildTime": "2026-04-05T10:00:00Z"
10
    }
11
  },
12
  "shared": [
13
    {
14
      "assets": { "js": { "sync": ["shared-vue.js"], "async": [] } },
15
      "sharedName": "vue",
16
      "version": "3.4.21"
17
    }
18
  ],
19
  "exposes": [
20
    {
21
      "path": "./Widget",
22
      "assets": {
23
        "js": { "sync": ["expose-Widget.js"], "async": ["chunk-abc123.js"] }
24
      }
25
    }
26
  ]
27
}

1
// vite.config.ts - Remote 端
2
import { defineConfig } from 'vite';
3
import vue from '@vitejs/plugin-vue';
4
import { federation } from '@module-federation/vite';
5

6
export default defineConfig({
7
  plugins: [
8
    vue(),
9
    federation({
10
      name: 'remote_app',
11
      filename: 'remoteEntry.js',
12
      exposes: {
13
        './Widget': './src/components/Widget.vue',
14
        './utils': './src/utils/index.ts',
15
      },
16
      shared: {
17
        vue: { singleton: true, requiredVersion: '^3.4.0' },
18
        pinia: { singleton: true, requiredVersion: '^2.1.0' },
19
      },
20
    }),
21
  ],
22
  build: {
23
    target: 'esnext',
24
    minify: false, // 开发阶段关闭压缩便于调试
25
  },
26
});

1
// vite.config.ts - Host 端
2
import { defineConfig } from 'vite';
3
import vue from '@vitejs/plugin-vue';
4
import { federation } from '@module-federation/vite';
5

6
export default defineConfig({
7
  plugins: [
8
    vue(),
9
    federation({
10
      name: 'host_app',
11
      remotes: {
12
        remote_app: {
13
          type: 'module',
14
          name: 'remote_app',
15
          entry: 'http://localhost:5001/remoteEntry.js',
16
          entryGlobalName: 'remote_app',
17
        },
18
      },
19
      shared: {
20
        vue: { singleton: true, requiredVersion: '^3.4.0' },
21
        pinia: { singleton: true, requiredVersion: '^2.1.0' },
22
      },
23
    }),
24
  ],
25
});

1
# nginx.conf - Remote 应用的 CORS 和缓存配置
2
server {
3
    listen 80;
4
    server_name remote-app.example.com;
5

6
    location / {
7
        root /usr/share/nginx/html;
8

9
        # CORS - 允许 Host 跨域加载
10
        add_header Access-Control-Allow-Origin *;
11
        add_header Access-Control-Allow-Methods 'GET, OPTIONS';
12

13
        # remoteEntry 不缓存，确保 Host 总是获取最新版本
14
        location ~* remoteEntry\.js$ {
15
            add_header Cache-Control "no-cache, no-store, must-revalidate";
16
            add_header Access-Control-Allow-Origin *;
17
        }
18

19
        # mf-manifest.json 同样不缓存
20
        location ~* mf-manifest\.json$ {
21
            add_header Cache-Control "no-cache, no-store, must-revalidate";
22
            add_header Access-Control-Allow-Origin *;
23
        }
24

25
        # 其他静态资源长期缓存（文件名含 hash）
26
        location ~* \.(js|css|png|jpg|svg|woff2)$ {
27
            add_header Cache-Control "public, max-age=31536000, immutable";
28
            add_header Access-Control-Allow-Origin *;
29
        }
30
    }
31
}