什么是微前端
参考文章【微前端-最容易看懂的微前端知识 - 知乎 (zhihu.com)】
微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。微前端不是单纯的前端框架或者工具，而是一套架构体系。
为什么会出现微前端
任何新技术的产生都是为了解决现有场景和需求下的技术痛点，微前端也不例外：
- 拆分和细化：当下前端领域，单页面应用（SPA）是非常流行的项目形态之一，而随着时间的推移以及应用功能的丰富，单页应用变得不再单一而是越来越庞大也越来越难以维护，往往是改一处而动全身，由此带来的发版成本也越来越高。微前端的意义就是将这些庞大应用进行拆分，并随之解耦，每个部分可以单独进行维护和部署，提升效率。
- 整合历史系统：在不少的业务中，或多或少会存在一些历史项目，这些项目大多以采用老框架类似（Backbone.js，Angular.js 1）的B端管理系统为主，介于日常运营，这些系统需要结合到新框架中来使用还不能抛弃，对此我们也没有理由浪费时间和精力重写旧的逻辑。而微前端可以将这些系统进行整合，在基本不修改来逻辑的同时来同时兼容新老两套系统并行运行。
微前端的优缺点
微前端的好处
- 复杂度可控
- 独立部署：相互之间不存在依赖关系
- 技术选型灵活
- 高容错：某个应用的崩溃不影响其他应用
- 可拓展
微前端的缺陷
- 操作复杂性：应用的拆分基础依赖于基础设施的构建，一旦大量应用依赖于同一基础设施，那么维护变成了一个挑战
- 项目过于庞大,代码编译慢,开发体差,需要一种更高维度的解耦方案
- 构建速度慢
- 应用迭代麻烦
微前端因其分而治之的思想，所以中小型的项目使用微前端反而会将事情复杂化，因此更加适用于大型的独自为战的项目使用。
微前端的主流实现方案
常见的微前端方案有MicroApp, single-spa, qiankun, 以及webpack5的模块联邦
无框架的解决方案有: web components web component 本质是封装自定义的 html,会很快回到jQuery 时代。
主流方案的对比
参考文章 微前端技术方案调研（qiankun、micro-app、wujie） - 知乎 (zhihu.com) 微前端wujie、qiankun、micro-app、EMP 方案比较 - 简书 (jianshu.com)
| 对比 | single-spa | 类WebComponent | WebComponent + iframe |
|---|---|---|---|
| 框架 | qiankun | micro-app | wujie-micro |
| 首个版本 | v1.1.4 (2019-08-01) | v0.1.0 (2021-07-09) | 1.0.0-rc.1 (2022-07-05) |
| 最近更新 | v2.10.8 (2023-05-17) | v1.0.0-beta.4 (2023-04-27) | 1.0.16 (2023-05-17) |
| ie | Yes | ==No== | Yes，自动切换成iframe |
| 接入成本 | 中 | 低 | 较低 |
| 开箱即用 | ==No== | ==No== | Yes |
| 数据通信机制 | props | addDataListener | props、window、eventBus |
| js沙箱 | Yes | Yes | Yes，iframe来实现js沙箱 |
| 样式隔离 | Yes | Yes | Yes，webcomponent来实现页面的样式元素隔离 |
| 元素隔离 | ==No== | Yes | Yes |
| 静态资源地址补全 | ==No== | Yes | ==No== |
| 预加载 | Yes | Yes | Yes |
| keep-alive | ==No== | Yes | Yes |
| 应用共享同一个资源 | Yes | Yes | Yes |
| 应用嵌套 | Yes | Yes | Yes |
| 插件系统 | ==No== | Yes | Yes |
| 子应用不改造接入 | ==No== | Yes | Yes，满足跨域可以不改 |
| 内置降级兼容处理 | ==No== | ==No== | Yes，通过 babel 来添加 polyfill |
选型建议
-
考虑系统需要兼容 ie 浏览器场景
wujie-micro>qiankun -
接入便捷度考虑
wujie-micro>micro-app>qiankun -
框架稳定性 (框架成熟度)
qiankun>micro-app>wujie-micro
