2021是时候了解一下微前端了

前言

小伙伴们大家好。今天将给大家分享一款微前端框架 - qiankun。那么在学习框架之前我们先来了解一下什么是微前端,它是怎么产生的,又是干什么用的,为什么要使用微前端?带着这些问题我们继续往下看!

什么是微前端

微前端是一种可以将多个独立发布的功能构建成一个完整的web应用的技术手段。说白了就是:将一个完整web应用按照不同的功能模块拆分成一个个不同的独立的子应用,然后再通过主应用来动态的加载这些子应用。核心就是先拆然后后再合。来看个例子:比如现有一个庞大的项目管理系统,该系统由项目模块,计划模块,任务模块,配置模块,系统管理,权限管理等模块组成,在使用微前端之前这些模块全都糅合在一个大的web应用中,要发布只能全部一起发布,并且也只能部署在同一台服务器中。那如果我们现在引入微前端的话就可以把每个功能模块都独立开发,独立部署,最后再通过主应用来动态的加载它们,实现了模块间的松耦合,无论是开发还是部署都可独立进行。

微前端分为:主应用和微应用
如下图所示展示了传统web应用和微前端应用的对比在这里插入图片描述

为什么要用微前端

相信看了上图后,小伙伴们基本上也能够猜到为什么要使用微前端了。我们现在假想有如下这么几个场景:

  • 1.随着业务的发展,团队也越来越壮大,一个庞大的项目需由不同的小组独立开发不同的模块
  • 2.每个小组间根据不同需求可能需要使用不同的技术栈开发
  • 3.每个小组开发完成的功能模块需要独立部署,独立运行
  • 4.新项目还需兼容已有的一些老的功能模块
  • 5.后期有功能模块需要升级改造,那么不得不将整个项目全部重新部署

想想如果以上五个场景如果还是按照传统的方式去开发,根本是无法实现的,独立开发还勉强可以,但是独立部署,兼容不同技术栈以及一些老的功能模块。如果全部都杂糅在同一应用中就算实现了相信后期也是极其难以维护的。这个时候微前端就诞生了,并且能够很好的满足上面提到的五种场景。

这就是微前端的核心价值所在:

  • 与技术栈无关,不同子应用可以使用不同的技术栈
  • 可以独立开发,独立部署
  • 可以实现增量升级,渐进式的重构
  • 每个微应用间独立部署独立运行

如何实现一个微前端

据说微前端的灵感来自于我们每天都在用的电脑。我们要想使用电脑,那必须要安装操作系统,然后如果需要用到哪些应用,再基于操作系统安装这些应用,每个应用都是独立安装,独立运行互不影响的,并且当某个应用需要使用的时候再打开它使用。如下图:
在这里插入图片描述

要想实现一个微前端应用,这里不得不提到两个框架:

  • single-spa:2018年Single-SPA诞生,single-spa是一个用于前端微服务化的JavaScript前端解决方案,实现了路由劫持和应用加载,也就使我们上面提到的微前端。但是该框架有个问题就是没有处理各个微应用间的样式隔离和js隔离。容易造成样式或全局变量的污染。于是又诞生了一个新的框架 - qiankun
  • qiankun:2019年qiankun1.0诞生,qiankun是基于single-SPA开发的,它提供了更加开箱即用的API,并且做到了技术栈无关,样式隔离和js隔离。最重要的是接入更加简单,简单到就像使用iframe一样。

上面提到single-spa还存在一些问题,而qiankun则是基于single-spa开发的,所以后面分享中就不再涉及single-spa了,我们以qiankun为主来学习一下微前端

总结

本篇我们从“什么是微前端”,“为什么要用微前端”和“如何使用微前端”三方面来分享学习了关于微前端的一些概念知识,最后还提到了能够帮助我们实现微前端的两个框架single-spa和qiankun。关于qiankun框架我们将在下一章节中详细讲解。好了小伙伴们本次分享就到这里了。

喜欢的小伙伴欢迎点赞留言加关注哦!

おすすめ

転載: blog.csdn.net/lixiaosenlin/article/details/121036758