微前端实现方式对比

iframe

优势

• 技术成熟
• 支持页面嵌入
• 天然支持运行沙箱隔离、独立运行

劣势

• 页面之间可以是不同的域名
• 需要对应的设计一套应用通讯机制，如：监听、传参格式等内容
• 应用加载、渲染、缓存等体系的实现

qiankun

优势

• 基于single-spa封装，提供了更加开箱即用的 API。
• 技术栈无关，任意技术栈的应用均可接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。
• HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。
• 样式隔离，确保微应用之间样式互相不干扰。
• JS 沙箱，确保微应用之间 全局变量/事件 不冲突。
• 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。

劣势

• 适配成本比较高，工程化、生命周期、静态资源路径、路由等都要做一系列的适配工作；
• css 沙箱采用严格隔离会有各种问题，js 沙箱在某些场景下执行性能下降严重；
• 无法同时激活多个子应用，也不支持子应用保活；

micro-app

优势

• 不需要修改webpack配置，是目前市面上接入微前端成本最低的方案
• 使用简单 ——
  我们将所有功能都封装到一个类WebComponent组件中，从而实现在基座应用中嵌入一行代码即可渲染一个微前端应用。
  同时micro-app还提供了js沙箱、样式隔离、元素隔离、预加载、数据通信、静态资源补全等一系列完善的功能。
• 零依赖 ——
  micro-app没有任何依赖，这赋予它小巧的体积和更高的扩展性。
• 兼容所有框架 ——
  为了保证各个业务之间独立开发、独立部署的能力，micro-app做了诸多兼容，在任何技术框架中都可以正常运行。

EMP（webpack 5 module federation）

优势

• webpack 联邦编译可以保证所有子应用依赖解耦；
• 应用间去中心化的调用、共享模块；
• 模块远程 ts 支持；

劣势

• 对 webpack 强依赖，老旧项目不友好；
• 没有有效的 css 沙箱和 js 沙箱，需要靠用户自觉；
• 子应用保活、多应用激活无法实现；
• 主、子应用的路由可能发生冲突；

自研框架

优势

• 高度定制化，满足需要做兼容的一切场景
• 独立的通信机制和沙箱运行环境，可解决应用之间相互影响的问题
• 支持不同技术栈子应用，可无缝实现页面无刷新渲染

劣势

• 技术实现难度较高
• 需要设计一套定制的通信机制
• 首次加载会出现资源过大的情况