什么是微前端? 能解决什么问题? 可能面临的问题/缺点?

590 阅读3分钟

微前端就是将前端应用分解成一些更小,更简单的,能够独立开发,测试,部署的小模块,而在用户看来仍然是一个整体的产品技术或者思想

 主要特点是: 

  1. - 耦合性低,更简单的代码库,让开发者编写更小,更简单,更容易的项目 
  2. - 技术栈无关
  3.  - 可以增量编译,支持渐进式重构,先让新旧代码并存,然后逐步转化旧代码 
  4. - 每个子模块都具有独立开发,持续部署,独立运行,独立维护的能力
  5.  - 单一职责,每个子项目只做和自己相关的业务工作,各子项目之间不存在依赖关系,保持隔离 

优点 

  1. - 兼容遗留系统
  2.  - 与时俱进,不断引入优秀的新技术/新框架 
  3. - 支持局部/增量升级, 避免每次发布都是全量来发布,牵一发而动全身,即使发布一个小模块,也可能导致项目垮掉 
  4. - 代码简洁,解耦,更易维护 
  5. - 子应用间可以自由拆分,组合 
  6. - 与技术栈关联不大,各个子应用的开发团队可以采取熟悉的技术栈进行开发,降低开发时间和成本 
  7. - 可以采用组件或者服务的方式进行团队间技术共享 
  8. - 每个模块应用可以独立部署,独立运行,拥有故障隔离

缺点 

  1. - 重复依赖: 由于应用独立开发,编译,会存在重复依赖的情况,导致不同应用重复下载相同依赖,额外增加流量和服务端压力 
  2. - 团队之间容易分裂: 各团队只关注自己的业务或者平台功能,在面向用户的整体交付方面,会导致对用户的需求体现不敏感,响应不及时 
  3. - 操作复杂: 开发体验不好,可能需要同时开启多个项目来获取完整的体验,跟踪和调试要跨全部系统 
  4. - 性能处理的挑战性: 不同的实现方案,性能很难得到保障,例如 iframe方式,一个iframe等于打开1个新的网页,所有的JS/CSS全部加载1遍,内存会*2,无法释放 
  5. - 拆分粒度越小,便意味着架构变得越复杂,维护成本高
  6.  - 技术栈一旦多样化,就意味着技术栈混乱,系统变得更复杂,更难维护 - 管理版本复杂,依赖复杂

常见的微前端方案有哪些? 

 - 路由分发式: nginx代理转发,通过 路由在多个独立的前端应用之间跳转,一般是nginx之类的http服务器反向代理,或者框架自带路由解决

- iframe

 - 前端微服务化

微前端架构有两种架构模式:

1.基座模式:通过⼀个主应⽤,来管理其它应⽤。设计难度⼩,⽅便实践,但是通⽤度低。

2.⾃组织模式:应⽤之间是平等的,不存在相互管理的模式。设计难度⼤,不⽅便实施,但是通⽤度⾼。

以上是学习微前端的笔记,后续会根据学习理解情况发各种方案的优缺点,和实际应用场景,应用拆分,qiankun.js学习与应用