模块联邦简化JavaScript跨应用代码共享

模块联邦是Webpack 5推出的革命性功能，它让不同JavaScript应用之间能像导入本地模块一样无缝共享组件、工具函数甚至状态，彻底简化了微前端架构下的代码复用——通过构建时动态生成远程入口（如remoteEntry.js）、运行时按需加载与智能依赖共享（如强制React单例），既避免了重复打包和版本冲突，又无需复杂运行时加载器，真正实现了“写一行import，跨应用调用”的极致开发体验。

模块联邦通过在构建时让不同应用直接引用彼此的模块，实现跨应用代码共享。它不是在运行时加载代码，而是在构建阶段动态生成可远程调用的模块入口，使一个应用能像导入本地模块一样使用另一个应用暴露出来的组件、函数或状态。

模块联邦的基本原理

模块联邦是 Webpack 5 提供的功能，允许将一个打包构建的应用作为“容器”，暴露出部分模块供其他应用（“宿主”）动态加载。这种方式打破了传统打包中每个应用独立封闭的限制。

核心机制包括：

• 远程应用通过 ModuleFederationPlugin 暴露指定模块
• 宿主应用声明从远程容器中引入模块
• 浏览器运行时动态解析并加载远程模块，实现按需使用

配置远程应用暴露模块

在需要共享代码的应用（比如 UI 组件库或微前端子应用）中，配置 Webpack 插件以暴露模块：

上述配置会生成 remoteEntry.js，作为外部应用接入的入口文件。

宿主应用引入远程模块

另一个应用可以在其 Webpack 配置中引入该远程应用：

之后即可在代码中像普通模块一样导入：

Webpack 会在运行时自动下载并初始化远程模块，确保类型和依赖正确匹配。

共享依赖避免重复加载

多个应用通常使用相同的技术栈（如 React、Lodash）。通过 shared 配置，模块联邦可以识别这些公共依赖，只加载一次。

例如设置 { react: { singleton: true } } 后，所有参与方必须使用相同版本的 React，防止冲突和内存浪费。

基本上就这些。模块联邦让跨应用共享变得像写 import 语句一样简单，特别适合微前端架构中的组件复用和逻辑解耦。关键在于合理划分暴露边界，并统一基础依赖版本。不复杂但容易忽略细节。

以上就是《模块联邦简化JavaScript跨应用代码共享》的详细内容，更多关于的资料请关注golang学习网公众号！