微前端之模块联邦

微前端

‌微前端‌是一种将微服务理念应用于前端开发的架构风格，它将一个大型、复杂的前端应用拆分为多个更小、更独立的"微应用"，这些微应用可以由不同的团队‌独立开发、独立部署、独立运行‌，最终通过一个"主应用"（基座）进行集成和统一展示。

这种架构主要解决了两大痛点：

巨石应用难以维护‌：随着项目迭代，前端代码库变得臃肿，牵一发而动全身。
跨团队协作效率低‌：多个团队共用一个代码仓库，开发和发布相互掣肘。

微前端的核心特点

‌技术栈无关‌：不同的微应用可以使用 React、Vue、Angular 甚至原生 JS 等不同技术栈，主框架不限制其选择。
‌独立部署‌：每个微应用可以有自己的 CI/CD 流程，更新时无需重新构建和发布整个系统。
‌增量升级‌：对于老旧系统，可以逐步用新技术重构部分功能，实现平滑过渡，降低全量重构的风险。
‌团队自治‌：每个团队负责自己的微应用，拥有更高的开发自由度和效率。

目前业界有多种实现微前端的方案，下面介绍Webpack 5 Module Federation‌：一种原生支持微前端的构建技术，允许一个应用在运行时动态加载并使用另一个应用的代码。

模块联邦（Module Federation）

‌模块联邦‌（Module Federation）是 Webpack 5 引入的一项核心特性，它为微前端架构提供了一种‌原生、高效‌的代码共享机制，允许不同应用在运行时动态加载彼此的模块，实现真正的独立开发与按需集成。

核心工作原理

模块联邦基于"‌主-从‌"（Host-Remote）架构，通过构建时声明、运行时加载的方式打破应用边界：

Host（主应用/容器）‌：负责协调和加载远程模块。
Remote（远程应用/子应用）‌：暴露自身模块供其他应用使用。
‌Shared Scope（共享作用域）‌：用于在多个应用间共享依赖（如 React、Vue），避免重复加载，解决版本冲突。

关键配置与实现

远程应用暴露模块
在 Remote 的 webpack.config.js 中使用 ModuleFederationPlugin：

javascript 复制代码

new ModuleFederationPlugin({
  name: 'userApp',
  filename: 'remoteEntry.js',
  exposes: {
    './UserList': './src/components/UserList',
  },
  shared: { react: { singleton: true } },
})

主应用引入远程模块
在 Host 中声明依赖：

javascript 复制代码

new ModuleFederationPlugin({
  name: 'hostApp',
  remotes: {
    userApp: 'userApp@https://cdn.example.com/remoteEntry.js',
  },
  shared: { react: { singleton: true } },
})

消费模块
在代码中像导入本地模块一样使用：

javascript 复制代码

const UserList = React.lazy(() => import('userApp/UserList')) ;

总结

两种角色：Host消费模块，Remote暴露模块
核心配置：name、filename、exposes、remotes、shared
动态加载：运行时按需加载远程模块
透明集成：开发体验接近本地模块

Module Federation将依赖管理从"构建时"推迟到"运行时"，为微前端架构和多应用场景提供了优雅的解决方案。