模块联邦通过运行时动态加载实现微前端代码共享，核心是Webpack 5的ModuleFederationPlugin。1. 远程应用暴露模块并生成remoteEntry.js；2. 宿主应用配置remotes引入远程模块；3. shared确保依赖版本一致且避免重复加载；4. 运行时按需加载远程chunk，实现解耦集成。
模块联邦（Module Federation）是 Webpack 5 引入的一项功能，它允许在运行时动态加载来自不同构建的 JavaScript 模块，实现微前端架构中多个独立应用之间的代码共享。它的核心在于让一个应用（Host）可以消费另一个应用（Remote）暴露的模块，而无需在构建时将它们打包在一起。
1. 基本原理：运行时模块共享
模块联邦不依赖传统的 npm 包或构建时打包合并，而是通过在运行时从远程应用加载模块来实现共享。每个参与的应用都使用 Webpack 构建，并配置 Module Federation 插件，明确自己是“宿主”还是“远程”角色。
其关键机制包括：
远程模块注册：远程应用在启动时会将其暴露的模块注册到全局的 __webpack_require__.federation 中。异步加载入口：宿主应用通过远程应用提供的入口 URL（如 remoteEntry.js）获取模块清单和加载器。按需加载模块：当宿主请求某个远程模块时，Webpack 的运行时会动态发起网络请求加载对应的 chunk。
2. 核心配置：ModuleFederationPlugin
实现模块联邦的关键是 Webpack 的 ModuleFederationPlugin。以下是常见配置项说明：
立即学习“Java免费学习笔记（深入）”；
作为远程应用（提供模块）：
new ModuleFederationPlugin({ name: 'remoteApp', // 远程应用唯一标识 filename: 'remoteEntry.js', // 输出的入口文件名 exposes: { './Button': './src/components/Button', // 暴露本地模块 './utils': './src/utils' }, shared: ['react', 'react-dom'] // 自动处理依赖共享})
作为宿主应用（消费模块）：
new ModuleFederationPlugin({ name: 'hostApp', remotes: { remoteApp: 'remoteApp@https://remote-domain.com/remoteEntry.js' }, shared: ['react', 'react-dom']})
配置后，宿主应用就可以像导入本地模块一样使用远程模块：
“`jsimport Button from ‘remoteApp/Button’;function App() { return ;}“`
3. 共享依赖（Shared Dependencies）
多个应用可能都使用了相同的库（如 React、Lodash）。模块联邦通过 shared 配置避免重复加载。
Webpack 会根据版本和 singleton 设置决定如何处理共享依赖：
若版本兼容，复用已加载的实例。若设置 singleton: true，确保全局只有一个实例（常用于 React 等状态敏感库）。支持自动版本协商，避免冲突。
4. 实现流程简述
当宿主应用启动并尝试加载远程模块时，大致流程如下：
宿主解析 remotes 配置，向远程地址请求 remoteEntry.js。该文件包含远程模块的 manifest 和加载逻辑。Webpack 运行时将远程模块映射到指定命名空间。调用 import('remoteApp/Button') 时，触发异步 chunk 加载。模块返回后，正常执行并渲染。
基本上就这些。模块联邦的核心是解耦构建过程，实现真正的运行时集成，特别适合大型团队协作和微前端落地。只要配置好 remoteEntry 和模块映射，跨应用引用就像写本地路径一样自然。不复杂但容易忽略细节，比如版本对齐和运行时环境一致性。
以上就是JavaScript中的模块联邦（Module Federation）是如何实现的？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526680.html
微信扫一扫 
支付宝扫一扫 
