微前端：微前端是一种软件架构模式，旨在解决大型前端应用程序开发和维护中的复杂性问题。它将前端应用程序拆分成更小的、独立的部分，每个部分可以由不同的团队开发、测试、部署和维护。这些独立的部分可以是单独的应用程序或者功能模块，它们可以独立开发和部署，但最终集成到一个统一的用户界面中。
微前端架构的优势包括：
- 团队独立性： 不同团队可以独立开发、测试和部署自己的微前端应用，减少团队之间的合作和依赖。
- 技术栈灵活性： 可以根据项目需求和团队技术偏好选择不同的技术栈，提高开发效率和质量。
- 代码复用性： 可以将通用的功能和组件抽象为独立的微前端应用，实现代码复用和模块化开发。
- 系统可扩展性： 微前端架构可以根据业务需求动态地添加、删除或替换微前端应用，实现系统的可扩展性和可维护性。
一、微前端的前世今生
前后端模块架构经历了前后端不分离-前后端分离-后端微模块-前端微前端等历程。 随着团队规模的不断增大，"巨石应用"的诞生，新技术栈的升级牵一发而动全身。业务线的增加和团队分工的划分，前端开始需要做集成和拆分。
二、微前端的理想状态及局限
- 模块级别独立使用
- 技术栈无关
- 独立开发，独立部署 后端是UI和执行过程无关的，只关心数据，所以做微服务拆分比较清晰，前端因为运行在一个浏览器环境中，加上UI也需要统一，数据需要通信，还有资源加载和冲突等等考虑因素，目前的微前端方案大部分只能支持到页面集成，对于模块级的处理仍比较困难。
三、微前端的现状和现有的解决方案
微前端很多时候是要和老旧程序打交道的，而不是新的应用程序就是设计成微前端。 目前有四种思路：
- webComponent
- Micro-APP
- Iframe（过于旧，有很多问题
- 模块联邦（过于新，对开发者素质要求高
- single-SPA（既是解决方案，也是一个框架）
- QIANKUN
Iframe
四、局限与缺点
1.DOM不共享
2.URL与内容不能做联动
3.全局上下文隔离，优点和缺点共存，优点是两个应用之间的状态不会互相影响，缺点是通信困难（比如登陆状态不能共享，子应用需要再登陆一次）
4.创建元素速度慢，浏览器上下文需要重建，资源需要重新加载
5.SEO不友好，无障碍读取困难，可用性降低
6.样式隔离
7.跨域限制
8.安全问题（使用不当容易造成XSS攻击）
9.路由会导致重新加载iframe页面，页面刷新而不是组件切换
五、single-SPA
方案：把一个子应用看成是一个单页应用的页面。每个子应用导出生命周期函数，由应用容器（父应用）调用和传值。相当于使用了子应用打包之后的产物（JS代码），它仅仅是实现了路由和应用入口，解决了上下文隔离的问题，其他微前端需要处理的问题都没有实现。
single-SPA也是基于页面集成的。
六、阿里 QianKun
阿里提供的框架，基于single-SPA的二次开发，中心思想也是容器-子应用思路，single没有考虑到子应用所需要的资源都打包到JS中过大问题，QK利用了每次打包之后的 index-html，读取之后将其放在基座应用中。遇到JS，CSS之后再读一次，单独处理。路由规则和应用入口还是基于singleSPA的，打包之后还是导出一个生命周期，在应用基座中还是跑生命周期，只不过不再读取打包后的JS了，而是读取indexhtml。 QK依旧是基于页面集成，达不到基于某个模块做集成。
QK在single基础上做了很多额外的处理工作：
1.CSS隔离
2.JS隔离
3.路由状态
4.通信方式
5.预加载
七、京东 Micro-APP
基于WebComponent的H5方案，和QK一样，MA也是读取index Html，也是基于页面集成的，其实就是把HTMl当作入口，再读取里面的内容。通过Eval执行里面的 JS，其他的模块和QK一模一样。
八、WebPack5 模块联邦 module Federation
必须基于webpack5+（技术栈相关），属于微模块级别，能做到把A应用的B模块嵌入C应用中。
基于Single系列都有一个共同的要求，都需要一个应用容器来承载子应用。但模块联邦方案不需要基座应用，它是去中心化的。
缺点：
1.技术栈相关，违背微前端的初衷和要求，比如vite项目就无法集成过来。
2.对团队成员水平有要求。现在的集成很多时候都是业务集成，如果没有基座应用去中心化，人员水平参差不齐会难以控制。
模块联邦出现的时间还太短，单独做微前端方案不够成熟。可以和QK，MA组合使用不过可以把它作为一个代码共享的工具。