模块联邦通过Webpack 5实现跨应用代码共享，支持运行时加载远程模块并共享依赖，但需配置remotes、exposes和shared避免冲突；为保障应用隔离，应设置React等库为singleton、限定版本范围，并结合CSS Modules、状态封装、沙箱机制及mount/unmount生命周期管理，防止样式穿透、状态污染与内存泄漏，确保微前端架构的低耦合与可维护性。
微前端架构让大型前端项目可以拆分成多个独立的子应用，各自开发、部署和运行。在众多实现方式中，模块联邦（Module Federation）是 Webpack 5 提出的一种原生支持的方案，它让不同构建的 JavaScript 应用能共享代码，而无需通过 npm 发布。但随着模块共享能力增强，应用隔离问题也变得突出。以下是关于模块联邦与应用隔离的关键点解析。
模块联邦：跨应用代码共享
模块联邦允许一个应用暴露模块，另一个应用动态加载并使用这些模块，整个过程在运行时完成。
核心配置在 Webpack 中通过 ModuleFederationPlugin 实现：
-
host 应用 使用
remotes引用远程模块 -
remote 应用 使用
exposes暴露本地模块 - 共享依赖可通过
shared配置避免重复加载
例如，主应用加载用户中心模块：
new ModuleFederationPlugin({
name: 'hostApp',
remotes: {
userApp: 'userApp@http://localhost:3001/remoteEntry.js'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})
这样主应用就能直接 import 'userApp/UserProfile' 使用远程组件。
运行时依赖冲突与解决方案
多个子应用可能使用不同版本的 React 或 Lodash，若不加控制，会引发全局污染或 Hooks 错误。
解决方式包括：
- 对关键库如 React 设置
singleton: true，确保全局唯一实例 - 使用
requiredVersion明确版本范围，避免不兼容引入
- 对非 singleton 的包，考虑通过打包工具别名或命名空间隔离
注意：即使共享了依赖，各应用仍需保证构建输出不污染全局变量。
样式与状态隔离策略
JavaScript 隔离只是基础，CSS 和状态管理同样需要处理。
- 推荐使用 CSS Modules 或 Scoped CSS（如 Shadow DOM）防止样式穿透
- 子应用应封装自己的状态（Redux、Zustand），避免共享 store 实例
- 通信走明确接口，如通过自定义事件或主应用传递上下文参数
比如子应用初始化时接收一个 config 对象，而不是直接读取 window 全局变量。
沙箱机制与生命周期管理
理想情况下，子应用卸载时应清理副作用，如事件监听、定时器、DOM 修改。
可设计简单的沙箱模式：
- 加载时创建代理 globalThis，限制修改范围
- 记录所有动态添加的样式表，在卸载时移除
- 暴露
mount和unmount生命周期钩子
主应用按需调用，确保资源释放。
基本上就这些。模块联邦极大提升了微前端的集成效率，但应用隔离不能完全依赖构建工具，更多要靠架构约定和运行时控制。设计时就要考虑边界清晰、低耦合，才能长期维护。
