本文已参与「新人创作礼」活动，一起开启掘金创作之路。
ice(飞冰)——阿里巴巴
Github: github.com/alibaba/ice
介绍：
简单而友好的前端研发体系，海量可复用物料，通过 GUI 工具极速构建中后台应用。飞冰始于淘宝内部的业务场景。微前端解决方案icestark在保证一个系统的操作体验基础上，实现各个子应用的独立开发和发版，框架应用通过 icestark 管理子应用的注册和渲染，将整个系统彻底解耦。
适用于以下业务场景：
l 后台比较分散，体验差别大，因为要频繁跳转导致操作效率低，希望能统一收口的一个系统内
l 单页面应用非常庞大，多人协作成本高，开发/构建时间长，依赖升级回归成本高
l 系统有二方/三方接入的需求
特性：
1、 最佳实践：通过 icejs 研发框架集成路由、状态管理、样式、权限管理、微前端等最佳实践
2、 可视化开发：通过 VS Code 插件集合 Iceworks 简化前端工程复杂度，提供可视化、配置化等能力
3、 丰富的物料：基于物料拼装提高项目开发效率，同时提供丰富的 React/Vue 物料
4、 自定义物料：不同团队可基于物料开发工具快速开发构建私有的物料体系
优势：
1、 可视化开发，配置化能力
降低应用开发的门槛、提高开发效率。可视化智能开发助手Iceworks通过插件的形式集成在 IDE 中，目前实现了与 VS Code / WebIDE / O2(阿里内部) 等主流集成开发工具（平台）的无缝对接。
2、 丰富的物料和自定义物料。
3、 架构设计上icestark 更加简单。
劣势：
1、 主应用必须是React，子应用支持 React/Vue/Angular... 等不同框架。
2、 ice-stark通过history实现应用加载，通过规范隔离应用稍许不够精细，和现有运营平台几乎全为umi体系也不太符合。
qiankun(乾坤)——蚂蚁金服
Github: github.com/umijs/qiank…
介绍：
在中国传统文化中，乾为天坤地，乾坤代表宇宙，意为统一。
qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。
qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，在经过一批线上应用的充分检验及打磨后，我们将其微前端内核抽取出来并开源，希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统，同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。
目前 qiankun 已在蚂蚁内部服务了超过 200+ 线上应用，在易用性及完备性上，绝对是值得信赖的。
特性：
1、 基于 single-spa 封装，提供了更加开箱即用的 API。
2、 技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。
3、 HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。
4、 样式隔离，确保微应用之间样式互相不干扰。
5、 JS 沙箱，确保微应用之间 全局变量/事件 不冲突。
6、 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。
7、 提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。
优势：
1、简单
任意 js 框架均可使用。微应用接入像使用接入一个 iframe 系统一样简单，但实际不是 iframe。
2、完备
几乎包含所有构建微前端系统时所需要的基本能力，如 样式隔离、js 沙箱、预加载等。
3、生产可用
已在蚂蚁内外经受过足够大量的线上系统的考验及打磨，健壮性值得信赖。
4、提供umi-plugin-qiankun来解决umi下的快速使用，能很好地与我们现在的脚手架融合。
劣势：
1、qiankun 是对 single-spa 的一层封装，核心做了构建层面的一些约束以及沙箱能力，构建层面的约束（比如 umd）有人觉得会让子应用变复杂，不一定是一个好的方案。
2、没有ice的可视化开发，配置化能力。
| 比较 | ice | qiankun |
|---|---|---|
| 样式和脚本隔离 | 1、icestark 当下方案里，本质上不存在隔离机制，目前推荐通过规范约束。2、如果存在三方接入这种不可控的场景，建议还是通过 iframe 的方式嵌入。3、Shadow DOM方案试验中。 | 1、沙箱可以确保单实例场景子应用之间的样式隔离。2、可开启严格的样式隔离模式，为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响。 |
| 主应用本地开发调试子应用 | 线上环境调试或本地部署后调试子应用[API] | 可开发环境调试子应用 |
| 物料 | 有丰富的物料资源 | Umi中有较少的物料资源 |
| 是否有可视化可配置能力 | 有。可视化开发助手icework， 有拖拽配置能力。 | 无。 |
❤️ 更多前端知识欢迎关注公众号交流
参考文章：
4、 目标是最完善的微前端解决方案 - qiankun 2.0
5、 微前端框架实践
