微前端概念
在目前的开发流程中对于组件以及公用部分大多采用了 npm 包管理的形式应用在多个项目
- 在这样的情况下更新了一个 npm 包需要在所有安装了此npm包的项目中进行同步更新
- 在每一个项目中都需要下载一份对应的 npm 包 大大的损耗了时间成本 从Micro Frontends 官网可以了解到,微前端概念是从微服务概念扩展而来的,摒弃大型单体方式,将前端整体分解为小而简单的块,这些块可以独立开发、测试和部署,同时仍然聚合为一个产品出现在客户面前。可以理解微前端是一种将多个可独立交付的小型前端应用聚合为一个整体的架构风格。
- 微前端 理解为业务模块的组件化
- 对比原有npm包的形式
微前端
2-1. 同步更新 - 统一管理的组件模块更新可同步至所有应用的项目中
2-2. 简单、解耦的代码库 - 增量升级 - 便于复杂业务情况拆分,在拆分的情况下更好的扩展迭代功能
2-3. 独立部署 - 每一个代码块都能单独进行测试,部署
目前微前端的解决方案大致分为以下三类:
基座模式:通过搭建基座、配置中心来管理子应用。如基于SIngle Spa的偏通用的乾坤方案,也有基于本身团队业务量身定制的方案。
自组织模式: 通过约定进行互调,但会遇到处理第三方依赖等问题。
去中心模式: 脱离基座模式,每个应用之间都可以彼此分享资源。如基于Webpack 5 Module Federation实现的EMP微前端方案,可以实现多个应用彼此共享资源分享。
框架上手
qiankun (作者蚂蚁金融科技)
emp Github
emp 知乎