微前端学习笔记
微前端是概念,iframe是实现
我之前理解错了,直接把这2个不是同一层级的进行了对比,一直在思考一个问题“微前端相比iframe有什么优势?”
这个问题是没有意义的。
微前端是一种架构设计的概念(可以理解为接口或者抽象类),而iframe是这种概念的具体实现(可以理解为实现的子类)。
常见的微前端实现方案
了解下每种方式在隔离、共享机制、生命周期管理方面是如何实现的。
- iframe
- WebComponents
- ESM
- 阿里qiankun
- 欢聚时代EMP
为什么选择微前端?
蚂蚁的微前端落地实践
自去年年底伊始,我们便尝试基于微前端架构模式,构建出一套全链路的面向中后台场景的产品接入平台,目的是解决不同产品之间集成困难、流程割裂的问题,希望接入平台后的应用,不论使用哪种技术栈,在运行时都可以通过自定义配置,实现不同应用之间页面级别的自由组合,从而生成一个千人千面的个性化控制台。
我认为微前端的核心价值在于 “技术栈无关“,这才是它诞生的理由,或者说这才是能说服我采用微前端方案的理由。
我们只需要在主系统构造一个足够轻量的基座,然后让各子应用按照共同的协议去实现即可。这个协议可以包括,主应用应该如何加载子应用,以及子应用如何被主应用感知、调度,应用之间如何通信等。这个协议不应该包括,子应用要如何确保隔离性、安全性,也就是子应用除了实现一些较为简单的协议之外,跟开发一个正常的 spa 应用应该没有任何差别,包括不应该有 开发、构建、发布 等流程上的侵入。只要子应用实现了这几个协议,其他的东西怎么玩,我们都不需要关心或干预。
微前端=轻量级的基座+插件生态,打造基于运行时的插件平台
从这个描述来看,微前端很适合我们当前的场景,因为我们的设计中台、可视化配置平台、可视分析平台,都属于这类范畴,都是需要和其他平台结合使用来发挥价值的。
从这个来看,对于我们的短视频项目,微前端似乎价值有限,我能想到的只有2个:
1、将项目逐步升级到TypeScript
2、提升业务方组件的接入能力(不局限于Vue开发)
3、自由接入一些工具和功能(比如切换输出形式:视频、网页、图片;接入SVG滤镜)
架构设计
直接参考蚂蚁的:

参考资料
qiankun:
https://qiankun.umijs.org/zh/guide
qiankun介绍: