微前端（Microfrontends）本地开发指南
微前端将大型前端拆分为多个独立应用，本地通过不同 localhost 端口联调主应用与子应用。
微前端（Microfrontends） 是一种架构模式：把单体前端拆成多个可独立开发、测试、部署的小应用，再在浏览器中组合成完整产品。本地开发时，各子应用通常运行在不同 localhost 端口。
常见实现方式
| 方案 | 说明 |
|---|---|
| Module Federation | Webpack / Rspack / Vite 插件，运行时加载远程模块 |
| iframe 集成 | 隔离强，通信需 postMessage |
| Web Components | 框架无关，自定义元素封装 |
| Monorepo + 反向代理 | 各包独立 dev server，NGINX 或 dev proxy 统一入口 |
本地典型端口布局
| 应用 | 示例地址 |
|---|---|
| 主应用（Shell） | http://localhost:3000 |
| 子应用 A | http://localhost:3001 |
| 子应用 B | http://localhost:3002 |
主应用在开发环境通过 Module Federation 或代理加载子应用暴露的 remoteEntry.js。
本地联调要点
- 同时启动 主应用与各 remote 的 dev server
- CORS：远程模块加载时注意跨域头，或使用同源代理
- 版本对齐：共享依赖（如 React）建议设为 singleton，避免多实例
- 统一入口：生产环境由 CDN 或网关提供单一域名；开发阶段可用端口分散
适用场景
- 多团队维护同一门户的不同业务模块
- 渐进式从单体前端迁移
- 需要独立发布节奏的子系统
小结
微前端没有单一默认端口，本地开发需为 Shell 与各子应用分配不同 localhost 端口并联调。选型时权衡隔离性、性能与团队自治需求。