微前端介绍

391 阅读3分钟

(本文已参与[新人创作礼]活动,一起开启掘金创作之路)

最近在工作中有使用到蚂蚁的qiankun微前端框架,于是便对微前端这种架构方式产生了好奇,那么什么是微前端?它产生的意义是什么?让我们来了解一下。

什么是微前端?

微前端其实是一种类似于微服务的架构方式,他将微服务的理念应用于浏览器端,即将Web应用由单一的单独应用变成多个小型的应用聚合唯一的应用,各个前端应用可以单独运行,独立开发,独立部署。

这里可以形象的去形容微前端,比如说你是一家大公司的老板,公司在越做越大的时候也在变得越来越臃肿且难以管理,这个时候,就会很自然的去想将公司的不同业务部门独立划分出去,成为一个个子公司去各自分别管理经营,而之前的总公司只需要去做管理统筹方面的工作就可以了。微前端就是如此,将一个复杂应用划分成不同的子应用,原先的主应用便作为基座在需要的时候加载相对应的应用就可以了。

还有一种情况会应用到微前端,这种场景就是多个应用难以聚合成一个应用时,我们可以采用微前端的方式去聚合他们。比如说有多个团队各自开发各自应用,而有一天,boss说:“太多应用查看起来太费心费力了,给整合成一个!”于是大家便开始集思广益去想办法聚合这些应用,可是由于各团队采取的技术栈有所不同,整合就显得尤为费劲,而这时候就轮到微前端出手了,我们只需要去建一个主基座,并且配置好相对应的路由,便可以完成boss的需求,这就是所谓的“上有政策,下有对策”了。

微前端的好处?

上节举的例子就已经很好的说明了微前端的作用了,主要是为了解决一些痛点,如下:

  • 拆分和细化:尤其当今前端领域,SPA应用越来越多,当一个应用功能越来越丰富,代码也会越来越臃肿,修改成本也会随之增高,微应用就可以将这庞大应用进行拆分,并解耦,并且不同部分可以由不同团队开发,提升效率。
  • 系统的整合:主要用于历史项目使用的框架不同,却还不能舍弃,重新编写又太费力气,而微前端可以在不修改原有逻辑的基础上,整合新老系统。

微前端的技术方案及架构图

微前端方案对比

目前主流的微前端方案为组合式应用路由,由主机座进行应用注册,路由管理,消息下发等功能,基本流程图如下

感兴趣的同学可以去这里看一下详细的: 微前端-最容易看懂的微前端知识-吕小鸣

qiankun?

qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。(官网介绍)

qiankun-good.png

通过qiankun框架,我们可以方便的进行微应用搭建,在之后的文章中会来实际的演示如何使用qiankun去实现微前端的这种架构,敬请期待。