模块联邦通过Webpack 5实现微前端架构，支持运行时共享代码。1. 核心机制：配置ModuleFederationPlugin，Host应用引入Remote应用暴露的模块，通过remoteEntry.js注册并按需加载。2. 基本配置：Remote应用使用exposes导出组件（如Header），Host应用通过remotes引用远程模块，实现import “navApp/Header”。3. 共享依赖：shared配置避免重复加载React等库，singleton确保单例，防止版本冲突。4. 应用场景：主应用集成子模块、独立维护UI库、公共能力集中管理，支持独立部署与多技术栈融合。合理划分边界和依赖共享可提升架构灵活性与效率。
模块联邦（Module Federation）是 Webpack 5 引入的一项功能，它让多个独立的 JavaScript 应用在运行时共享代码和组件，成为实现微前端架构的重要技术手段。它不需要将应用打包成单一整体，而是允许一个应用动态加载另一个应用暴露的模块，从而实现资源的高效复用。
1. 模块联邦的核心机制
模块联邦通过配置 Webpack 的 ModuleFederationPlugin 实现跨应用模块共享。核心角色有两个：
Host（容器应用）：消费其他应用暴露的模块 Remote（远程应用）：暴露自身模块供其他应用使用
在构建时，Webpack 会生成一个入口文件（如 red”>remoteEntry.js），Host 应用通过加载这个文件来获取 Remote 应用的模块注册信息，然后按需加载具体模块。
2. 基本配置示例
假设有一个头部导航组件被多个微前端共用，可以通过以下方式暴露和引入：
立即学习“Java免费学习笔记（深入）”；
Remote 应用配置（被引用方）
new ModuleFederationPlugin({
name: “navApp”,
filename: “remoteEntry.js”,
exposes: {
“./Header”: “./src/components/Header”,
},
shared: { react: { singleton: true }, “react-dom”: { singleton: true } }
})
Host 应用配置（引用方）
new ModuleFederationPlugin({
name: “hostApp”,
remotes: {
navApp: “navApp@http://localhost:3001/remoteEntry.js”
},
shared: { react: { singleton: true }, “react-dom”: { singleton: true } }
})
在 Host 中就可以像导入本地模块一样使用：
import Header from “navApp/Header”;
function App() {
return
}
3. 共享依赖避免重复加载
多个微前端如果都使用 React、Lodash 等公共库，直接打包会导致重复下载。模块联邦通过 shared 配置实现依赖共享：
设置 singleton: true 可确保整个系统只加载一个 React 实例 Webpack 会自动判断是否已加载，避免重复请求 版本兼容问题可通过 eager 或 requiredVersion 控制
4. 实际应用场景
模块联邦适合以下微前端场景：
主应用集成多个团队开发的子模块（如订单、用户中心） 统一 UI 组件库由独立项目维护，其他应用实时引用 权限系统、登录逻辑等公共能力集中管理 支持独立部署、技术栈混合（React + Vue 可共存）
基本上就这些。模块联邦让微前端从“拼页面”升级为“融模块”，关键是合理划分边界、统一共享依赖，就能实现灵活又高效的前端架构。
以上就是JavaScript中的模块联邦（Module Federation）如何实现微前端资源共享？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/43754.html
微信扫一扫 
支付宝扫一扫 
