什么是 Module Federation，它的工作原理是什么？ - 面试题

Module Federation 是 Webpack 5 引入的一项革命性功能，它允许在运行时动态加载和共享代码模块。其核心原理是通过构建时生成独立的构建产物，在运行时通过 JavaScript 动态导入机制实现模块的按需加载和共享。

关键概念：

Host（宿主应用）：消费远程模块的应用，负责加载远程入口
Remote（远程应用）：暴露模块供其他应用使用的应用
Shared（共享依赖）：多个应用之间共享的依赖库，避免重复加载

工作原理：

Module Federation 使用 Webpack 的容器插件（ContainerPlugin）和容器引用插件（ContainerReferencePlugin）来实现。Remote 应用在构建时会生成一个入口文件（remoteEntry.js），该文件包含了所有暴露模块的映射信息。Host 应用通过配置 remotes 字段，指定要加载的远程应用及其入口文件地址。

配置示例：

javascript
// Remote 应用配置
new ModuleFederationPlugin({
  name: 'remoteApp',
  filename: 'remoteEntry.js',
  exposes: {
    './Button': './src/Button'
  },
  shared: ['react', 'react-dom']
})

// Host 应用配置
new ModuleFederationPlugin({
  name: 'hostApp',
  remotes: {
    remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'
  },
  shared: ['react', 'react-dom']
})

优势：

实现真正的微前端架构，各团队独立开发和部署
运行时动态加载，无需重新构建整个应用
依赖共享，减少重复代码，优化加载性能
版本管理灵活，可以独立升级各个模块