微前端简介
微前端的概念由微服务衍生而来:一种由独立交付的多个前端应用组成整体的架构风格。具体的,将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块,而在用户看来仍然是内聚的单个产品
特点
类似于微服务
关键优势在于
- 代码库更小,更内聚、可维护性更高
- 松耦合、自治的团队可扩展性更好
- 渐进地升级、更新,甚至重写部分前端功能成为了可能
- 各个子应用直接技术栈无关,独立部署
实现方案
实现上,关键问题在于(具体查看解决思路)
多个 bundle 如何集成
- 服务端集成:如 SSR 拼装模板
- 构建时集成:如 Code Splitting
- 运行时集成:如 iframe、js 前端路由、web components 等
子应用之间怎样隔离影响
- 样式隔离
- js 隔离
公共资源如何复用
- 基础资源
- UI 组件
- 业务组件
公共资源比较推荐的模式是开源软件的管理模式:所有人都能补充公共资源,但有人负责监管,以保证质量、一致性、正确性
子应用间怎样通信
- 通过自定义事件间接通信是一种避免直接耦合的常用方式
- 路由参数通信
无论采用哪种方式,都应该尽可能减少子应用间的通信,以避免大量弱依赖造成的强耦合
如何测试 每个子应用都应该有自己的全套测试方案,特殊之处在于,除单元测试、功能测试外,还要有集成测试
- 集成测试:保证子应用间集成的正确性,比如跨子应用的交互操作
- 功能测试:保证页面组装的正确性
- 单元测试:保证底层业务逻辑和渲染逻辑的正确性
缺点
微前端的架构模式并非无害
- 导致依赖项冗余,增加用户的流量负担 没有非常理想的解决办法,一种简单的方案是将公共依赖从子应用的构建产物中剔除,但又会在引入构建时耦合
- 团队自治程度的增加,可能会破坏写作 在采用微前端之前,先要考虑几个问题
- 现有的前端开发、测试、发布流程如何扩展支持多个应用
- 分散的、控制弱化的工具体系及开发事件是否可靠
- 针对各式各样的前端代码库,如何建立质量标准
总之,微前端将产生一堆小的东西,因此需要考虑是否具备采用这种方法所需的技术和组织成熟度
总结
类似于微服务之于后端,前端业务在发展到一定规模之后,也需要一种用来分解复杂度的架构模式,于是出现了微服务思想在前端领域的应用,即微前端。主要目的在于:
- 技术架构上进一步的扩展性(模块边界清晰、依赖明确)
- 团队组织上的自治权
- 开发流程上能独立开发、独立交付
- 最大的意义在于解锁了多技术栈并存的能力,尤其适用于渐进式重构中架构升级过渡期
- 允许低成本尝试新技术栈,甚至允许选用最合适的技术栈做不同的事情