模块联邦：动态运行时导入

在多团队前端组织中，多个独立部署的应用往往需要共享用户界面组件和工具函数。发布到 npm 需要提升版本号、发布新版本，并让每个使用方应用全部重新部署——这会造成团队之间的紧密耦合和缓慢的迭代周期。

传统方案（将共享代码发布为 npm 包）意味着，更新共享按钮组件需要依次完成：更新 npm 包、发布新版本、更新每个使用方应用的 package.json、重新构建并重新部署每个使用方应用。Module Federation 消除了所有这些步骤。

Module Federation 允许一个应用（“远程应用”）公开 JavaScript 模块，另一个应用（“宿主应用”）则可以在运行时加载并执行这些模块，而无需重新构建或重新部署宿主应用。当用户加载宿主应用时，它会按需动态获取远程应用的模块。

Webpack 5 通过 ModuleFederationPlugin 将 Module Federation 引入为一等内置功能。在 Webpack 5 之前，实现类似模式需要复杂的手动配置或第三方插件。该插件会自动处理所有动态加载和共享作用域管理。

远程应用是一个独立部署的应用，它会公开一个或多个模块——React 组件、工具函数或完整的功能页面——供其他应用使用。远程应用会构建一个 remoteEntry.js 清单，用于描述它公开了哪些内容以及如何加载这些内容。

宿主应用是使用一个或多个远程应用模块的应用。宿主应用会在 Webpack 配置中按名称和网址引用远程应用。当宿主应用的代码导入远程模块时，Webpack 的 Module Federation 运行时会从远程应用的网址动态获取并执行该模块。

共享模块是只应加载一次的库（例如 React 和 React DOM），即使宿主应用和远程应用都包含它们也是如此。将 React 标记为共享单例后，Module Federation 会确保只运行一个 React 版本——这非常关键，因为 React 的钩子在存在多个实例时会失效。

构建远程应用时，Webpack 会按照配置的文件名生成 remoteEntry.js 文件。这个文件既是轻量级清单，也是引导脚本：它声明远程应用公开了哪些模块，列出这些模块的分块网址，并初始化共享作用域。宿主应用会先下载这个文件，以发现远程应用提供的内容。

当宿主应用遇到对远程模块的导入时，会先检查远程应用的代码是否已经加载。如果尚未加载，它会从远程应用的网址获取 remoteEntry.js，初始化共享作用域（协商共享库的版本），然后下载并执行包含所请求模块的特定分块。

某个团队部署远程应用的新版本（更新后的 Button 组件），而无需修改宿主应用。下一个加载宿主应用的用户会自动获得新的 Button，因为宿主应用始终从当前的 remoteEntry.js 网址获取内容。无需重新构建宿主应用，无需重新部署宿主应用，也无需协调。

较早的微前端模式使用内嵌框架（iframe）来隔离各团队负责的页面区域。内嵌框架可以提供强隔离，但会让共享状态、网址路由和样式统一变得极其困难。Module Federation 让所有内容处于同一个 JavaScript 上下文中，因此可以共享路由、共享身份验证状态并保持样式一致。

remoteEntry.js 在 Module Federation 中起什么作用？

Module Federation 通过支持运行时模块加载，解决了共享前端代码的独立部署问题。远程应用通过 remoteEntry.js 公开模块；宿主应用可以动态使用这些模块，而无需重新构建。共享单例（React、React DOM）可以防止重复加载库。该架构实现了真正的独立部署：更新远程应用后，所有宿主应用都会立即看到更改。