了解模块联邦一
模块联邦（Module Federation）是 Webpack 5 中引入的一项创新功能，它允许 多个独立构建的应用程序之间共享代码 ，实现真正的微前端架构。简单来说，它打破了传统的代码复用模式，让不同团队开发的应用可以像调用本地模块一样调用对方的组件或功能。
模块联邦的核心概念
- 主机应用（Host） ：加载和使用远程模块的应用程序
- 远程应用（Remote） ：提供可被其他应用使用的模块
- 共享依赖（Shared） ：多个应用之间共享的第三方依赖（如 React、Vue 等）
模块联邦的主要好处
1. 无需发布即可共享代码
不再需要将共享组件发布到 npm 仓库，其他应用可以直接在运行时从远程应用加载组件，大大简化了开发流程。
2. 独立构建与部署
每个应用都可以独立构建、测试和部署，一个应用的变更不会影响其他应用，提高了开发效率和系统稳定性。
3. 运行时动态加载
模块联邦支持按需加载远程模块，只有在需要时才会从远程服务器获取代码，减少了应用的初始加载时间。
4. 版本控制与兼容性
支持同时使用不同版本的共享模块，避免了版本冲突问题，提高了系统的灵活性。
5. 团队自治
不同团队可以独立开发自己的应用，选择自己熟悉的技术栈，只需要约定好共享接口，降低了团队间的耦合度。
6. 优化资源利用
共享依赖可以避免重复打包相同的第三方库，减少了应用的体积，提高了加载性能。
7. 渐进式迁移
可以逐步将大型应用拆分为多个小型应用，实现渐进式迁移，降低了重构风险。
应用场景
模块联邦有一些典型的使用场景，包括：
- 允许独立应用程序（微前端架构中称为“微前端”）共享模块，而无需重新编译整个应用。
- 不同的团队处理同一应用程序的不同部分，而无需重新编译整个应用程序。
- 运行时中在应用间动态加载和共享代码。
模块联邦可以帮助你:
- 减少代码重复
- 提高代码可维护性
- 减小应用程序的整体大小
- 提高应用性能
与 npm 的区别
安装方式
- npm:
install xxxx依赖, 当依赖就行维护升级或者修复问题之后，需要重新进行安装更新 - shared: 需要将
bundle进行部署在服务器，通过https链接引入，如果shared进行更新，刷新页面即可更新。
区别
| 场景 | npm 包 | 模块联邦 |
|---|---|---|
| 工具库 | ✅ 适合 | ⚠️ 过度设计 |
| UI 组件库 | ✅ 适合 | ✅ 适合（多应用共享） |
| 微前端架构 | ❌ 不适合 | ✅ 非常适合 |
| 独立部署需求 | ❌ 不支持 | ✅ 支持 |
| 快速迭代 | ⚠️ 需要重新构建 | ✅ 独立更新 |
| 版本一致性 | ⚠️ 需要手动管理 | ✅ 自动协商 |
选择 npm 包的情况：
- 工具函数库、纯逻辑代码
- 不需要频繁更新
- 单应用使用
- 需要离线使用
- 简单的代码共享
选择模块联邦的情况：
- 微前端架构
- 多应用共享组件
- 需要独立部署和更新
- 需要运行时动态加载
- 需要共享大型依赖（如 Vue、Element Plus）
- 需要版本协商和依赖共享
可能出现的问题
- 引入 shared 之后，在项目引入，代码报错，组件不渲染。
- 不知道如何正确引入 shared
share 怎么配？