27.2 微前端方案在 Vue 项目中的落地

Module Federation（模块联邦）是 Webpack 5 引入的一项核心特性，它为微前端架构提供了一种原生、去中心化、运行时动态共享代码的解决方案。与传统的 iframe 或基于路由分发的微前端框架不同，模块联邦让多个独立构建的应用程序（微应用）可以在运行时相互暴露和消费模块，就如同它们原本就编译在一起。

核心概念：Host 与 Remote

在模块联邦架构中，每个独立的构建产物都可以扮演两种角色：

Remote（远程应用）：暴露自己的模块，供其他应用使用。一个 Remote 可以对外共享多个组件、工具函数、甚至整个页面。
Host（宿主应用）：消费 Remote 暴露的模块，并将它们集成到自己的运行时中。

重要的是，一个应用既可以向其他应用暴露模块（作为 Remote），也可以消费其他应用的模块（作为 Host），角色完全根据实际需要配置。

工作原理简述

模块联邦通过 Webpack 的 ModuleFederationPlugin 插件，在构建时为每个应用生成一份远程入口文件（remoteEntry.js）。当 Host 应用加载时，它会动态加载 Remote 的 remoteEntry，并建立模块共享作用域。之后，Host 中就可以像使用本地异步模块一样 import() 远程模块。Webpack 会自动处理依赖共享（shared）、版本协商和懒加载。

这种机制实现了：

运行时集成：微应用的发布和部署相互独立，Host 不需要重新构建就能获取 Remote 的最新版本（基于 URL 加载）。
依赖共享优化：通过 shared 配置，React、ReactDOM、公共组件库等可以在多个应用间共享同一个实例，避免重复加载和状态冲突。
独立开发与部署：每个微应用有自己的代码仓库、构建流水线和发布节奏，互不干扰。

在 React 项目中的配置示例

假设我们有一个宿主应用 host-app 和一个远程组件库 remote-components，后者暴露一个 Button 组件。

远程组件库（remote-components）的 Webpack 配置：

// webpack.config.js (remote)
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...其他配置
  plugins: [
    new ModuleFederationPlugin({
      name: 'remote_components',           // 远程应用的唯一名称
      filename: 'remoteEntry.js',          // 远程入口文件名称
      exposes: {
        // 暴露 Button 组件供外部使用
        './Button': './src/components/Button',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
      },
    }),
  ],
};

宿主应用（host-app）的 Webpack 配置：

// webpack.config.js (host)
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...其他配置
  plugins: [
    new ModuleFederationPlugin({
      name: 'host_app',
      remotes: {
        // 声明远程模块地址，运行时从这里加载 remoteEntry
        remoteComponents: 'remote_components@http://localhost:3001/remoteEntry.js',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
      },
    }),
  ],
};

在宿主应用中消费远程组件：

// host-app/src/App.js
import React, { Suspense, lazy } from 'react';

// 使用 lazy + import 动态加载远程组件
const RemoteButton = lazy(() => import('remoteComponents/Button'));

function App() {
  return (
    <div>
      <h1>宿主应用</h1>
      <Suspense fallback={<div>加载远程组件中...</div>}>
        <RemoteButton label="来自远程的按钮" />
      </Suspense>
    </div>
  );
}

宿主应用在运行时通过网络加载 http://localhost:3001/remoteEntry.js，获取 Button 组件的模块定义。由于配置了 shared，如果宿主应用和远程组件库都依赖 React 18，运行时只会加载一份 React 实例，从而避免版本冲突和双重实例问题。

与微前端框架（qiankun）的对比

| 特性 | Module Federation | qiankun |
|------|-------------------|---------|
| 集成方式 | 构建时配置 + 运行时动态加载模块，组件级别共享 | 基于路由分发，每个子应用是一个完整的 SPA |
| 沙箱机制 | 依赖共享原生解决，无 JS 隔离（需自行控制样式） | 内置 JS 沙箱（Proxy）和样式隔离 |
| 性能 | 依赖共享减少重复加载，无额外容器开销 | 需要额外的应用加载和沙箱初始化开销 |
| 技术栈限制 | 必须使用 Webpack 5（或兼容插件） | 子应用可以是任何框架，只要能挂载 |
| 适用场景 | 同技术栈（React）下需要组件/模块深度复用的场景 | 异构技术栈（Vue+React）、需要强隔离的大型组织 |

实际落地中的注意事项

1. 共享依赖的版本管理
对于 React 这种要求单实例的库，务必设置 singleton: true，否则可能出现 Hooks 调用抛出 Invalid hook call 这种棘手错误。建议统一管理各微应用的 React 版本，或者使用 requiredVersion 明确版本范围。

2. 样式隔离
模块联邦本身不提供样式隔离机制。如果远程组件带有 CSS，必须通过 CSS Modules、CSS-in-JS 或 BEM 命名约定来避免全局样式污染。也可以利用 __webpack_share_scopes__ 等高级功能手动处理。

3. 远程入口的加载时机与容错
远程应用可能由于网络问题或服务宕机不可用，因此在 Host 中必须做好错误边界处理。可以结合 Suspense 和 ErrorBoundary 提供降级 UI。

function App() {
  return (
    <ErrorBoundary fallback={<p>远程模块加载失败，请稍后重试</p>}>
      <Suspense fallback={<Spinner />}>
        <RemoteButton />
      </Suspense>
    </ErrorBoundary>
  );
}

4. 开发环境配置
模块联邦的本地开发通常需要同时启动多个构建服务。可以利用 concurrently 或 monorepo 工具（如 pnpm workspace、Turborepo、Nx）来管理多个微应用的开发脚本。另外需注意跨域问题，开发时可能需要对 devServer 设置合适的 CORS 头。

5. 适合大型 React 项目的架构模式
模块联邦并不是替代所有微前端方案的金科玉律，它最适合的场景是：多个团队共同维护一个大型 React 应用，且团队之间希望共享公共组件（如设计系统组件），同时又保持各自的发布独立性。此时可以将基础 UI 库作为 Remote 暴露，业务域应用作为 Host 消费，形成一条高效的协作链路。

小结

Module Federation 是 Webpack 5 为微前端提供的一把利器，它突破了传统静态构建的边界，让运行时模块共享成为现实。在 React 技术栈中，它能够在不牺牲开发体验和运行时性能的前提下，实现大规模应用的拆分与整合。合理使用模块联邦，可以显著降低巨型单仓的维护成本，让多个团队能够以解耦的方式并行开发，同时共享公共依赖和组件。