首页 > 文章 > 前端

模块联邦助力微前端资源共享详解

时间：2025-10-31 22:07:56 236浏览收藏

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《模块联邦实现微前端资源共享详解》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

模块联邦通过Webpack 5实现微前端架构，支持运行时共享代码。1. 核心机制：配置ModuleFederationPlugin，Host应用引入Remote应用暴露的模块，通过remoteEntry.js注册并按需加载。2. 基本配置：Remote应用使用exposes导出组件（如Header），Host应用通过remotes引用远程模块，实现import "navApp/Header"。3. 共享依赖：shared配置避免重复加载React等库，singleton确保单例，防止版本冲突。4. 应用场景：主应用集成子模块、独立维护UI库、公共能力集中管理，支持独立部署与多技术栈融合。合理划分边界和依赖共享可提升架构灵活性与效率。

JavaScript中的模块联邦（Module Federation）如何实现微前端资源共享？

模块联邦（Module Federation）是 Webpack 5 引入的一项功能，它让多个独立的 JavaScript 应用在运行时共享代码和组件，成为实现微前端架构的重要技术手段。它不需要将应用打包成单一整体，而是允许一个应用动态加载另一个应用暴露的模块，从而实现资源的高效复用。

1. 模块联邦的核心机制

模块联邦通过配置 Webpack 的 ModuleFederationPlugin 实现跨应用模块共享。核心角色有两个：

Host（容器应用）：消费其他应用暴露的模块
Remote（远程应用）：暴露自身模块供其他应用使用

在构建时，Webpack 会生成一个入口文件（如 remoteEntry.js），Host 应用通过加载这个文件来获取 Remote 应用的模块注册信息，然后按需加载具体模块。

2. 基本配置示例

假设有一个头部导航组件被多个微前端共用，可以通过以下方式暴露和引入：

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

;
}