要实现动态导入的模块联邦系统，需利用 Webpack 5 的 Module Federation 功能并在运行时手动加载远程模块。核心是绕过构建时的静态 remotes 配置，通过动态加载 remoteEntry.js 文件并调用联邦 API 获取模块。具体步骤包括：使用 import() 动态引入远程入口，调用 webpack_init_sharing 和 container.init() 初始化共享作用域，再通过 container.get() 获取指定模块工厂函数并执行。Host 应用只需配置 ModuleFederationPlugin 的 name 和 shared 依赖，无需声明 remotes，从而实现灵活的按需加载。关键在于确保共享依赖（如 React）版本一致且设置 singleton: true，避免重复加载。该方案适用于插件化或低耦合微前端架构，提升系统灵活性。
要构建一个支持动态导入的模块联邦系统，核心在于利用 Webpack 5 的 Module Federation 功能，并结合运行时逻辑实现按需加载。关键点是把远程模块的加载时机推迟到运行时，而不是在构建时静态绑定。
理解模块联邦与动态导入的区别
默认情况下，模块联邦通过 remotes 配置在构建时声明依赖的远程应用。这种方式适合固定依赖关系。但若想实现动态导入——比如根据用户操作或配置加载不同微前端，就需要绕过静态配置。
动态导入的核心思路是：不提前写死 remote，而是在运行时通过脚本注入、Promise 加载和联邦容器 API 手动获取模块。
实现动态 Remote 容器加载
让系统支持动态导入，需手动加载远程的 remoteEntry.js 文件，并通过其暴露的联邦接口获取模块。
示例代码：async function loadRemoteModule(remoteUrl, moduleName) { // 动态加载 remoteEntry await __webpack_init_sharing__('default'); const container = await import(/* webpackIgnore: true */ remoteUrl);
// 初始化共享作用域 await container.init(__webpack_share_scopes__.default); // 从远程容器中获取指定模块 const factory = await container.get(moduleName); return factory();
}
// 使用
loadRemoteModule('https://www.php.cn/link/1189a8d303af41be1c476cd158fc4301', './Button')
.then(Module => {
document.body.appendChild(new Module.default());
});
配置 Host 应用支持动态联邦
Host 不需要在 webpack 配置中写死 remotes，但仍需启用 Module Federation 并管理共享依赖。
易学易用：友好的系统操作界面，无须具备专业知识，即可熟练的使用系统。功能完善：具备新建、修改、明细、审批、导入、导出、删除、批量、打印等功能。模型开发：自定义表单字段选项零代码二次开发，可无限扩展后台功能模块。 维护方便：基于互联网技术B/S体系结构，实施快速，极大的减少系统升级维护工作。售后保证：专业的技术研发团队，可提供可靠的产品迭代、版本升级和技术支持服务。超低成本：一次投入终身使用、用户不
new ModuleFederationPlugin({ name: 'hostApp', filename: 'remoteEntry.js', exposes: {}, shared: { react: { singleton: true }, 'react-dom': { singleton: true } } })
这样 Host 只作为容器，动态决定加载哪个远程模块，避免构建时耦合。
处理共享依赖与版本兼容
动态导入时，远程模块仍需与主应用共享依赖（如 React）。必须确保 shared 配置一致，否则会重复加载或报错。
建议策略：
- 所有应用使用相同版本的 React、React-DOM 等核心库
- 在 shared 中设置 singleton: true，强制共用实例
- 远程模块不要打包 shared 依赖，由 host 提供
基本上就这些。动态导入的模块联邦系统灵活性更高，适合插件化或低耦合微前端场景。关键是控制好远程入口加载时机和共享作用域初始化顺序，不复杂但容易忽略细节。
