微前端方案对比表格
下表从企业级架构选型中最关键的维度，对 iframe、Web Components、JavaScript Entry、HTML Entry、Module Federation 五种方案进行系统对比。
方案总体对比
| 维度 | iframe | Web Components | JavaScript Entry | HTML Entry | Module Federation |
|---|---|---|---|---|---|
| 技术本质 | 浏览器原生隔离容器 | 原生组件规范 | JS 生命周期加载 | HTML 解析 + 沙箱 | 运行时模块联邦 |
| 粒度 | 页面级 | 组件级 | 应用级 | 应用级 | 模块级 |
| 隔离性 | ★★★★★（最强） | ★★★★ | ★★★ | ★★★★ | ★★ |
| 通信成本 | ★★★★（高） | ★★ | ★★ | ★★ | ★ |
| 性能开销 | ★★（较差） | ★★★★ | ★★★★ | ★★★ | ★★★★★ |
| 依赖共享 | 不支持 | 有限 | 不支持 | 不支持 | ★★★★★（核心优势） |
| 样式冲突风险 | 无 | 极低 | 中 | 低 | 高 |
| 子应用独立运行 | 是 | 是 | 通常否 | 是 | 通常否 |
| 构建侵入性 | 无 | 低 | 高 | 极低 | ★★★★★ |
| 老项目改造成本 | ★ | ★★ | ★★★★ | ★ | ★★★★★ |
| 技术成熟度 | ★★★★★ | ★★★ | ★★★★ | ★★★★★ | ★★★★ |
星级说明：★ 越多表示该维度“越强 / 越优”。
关键维度解读
1. 隔离性
- iframe：浏览器级别隔离，JS / CSS / DOM 完全隔离，安全性最高
- HTML Entry：通过沙箱和样式隔离实现，工程上可接受
- Module Federation：几乎无隔离，需要严格工程规范
2. 通信复杂度
- iframe：依赖
postMessage，通信成本最高 - HTML Entry / JS Entry：事件、全局状态、props 传递，成本中等
- Module Federation：本质是模块调用，通信成本最低
3. 性能
- iframe：额外上下文与资源加载，性能最差
- HTML Entry：需解析 HTML 与执行沙箱，有一定损耗
- Module Federation：按需加载模块，性能潜力最高
4. 改造成本
- HTML Entry / iframe：最适合旧项目接入
- JavaScript Entry：需要显式改造生命周期
- Module Federation：构建、依赖、规范全面升级，成本最高
架构选型结论
- 多历史系统 / 多团队 / 稳定优先：HTML Entry（qiankun / micro-app）
- 安全隔离 / 三方系统嵌入：iframe
- 能力复用 / 技术中台 / 高性能：Module Federation
- 底层微前端原理 / 强控制权：JavaScript Entry
- 组件级复用 / 设计系统：Web Components