WdBly Blog

懂事、有趣、保持理智

周维的个人Blog

懂事、有趣、保持理智

站点概览

周维 | Jim

603927378@qq.com

推荐阅读

微前端解决方案

微前端解决方案

现在很多企业,基本在物理上进行了应用代码隔离,实行单个应用单个库,闭环部署更新测试环境、预发布环境和正式环境。于是,我们的探讨与思考的的是,基于不同应用不同库并独立部署的情况下,如何实现多个应用之间的资源共享?

在公司当前的业务中,正好有类似的问题,公司的后台系统架构为基于IAM系统,集成了包括GM、BI、OA等项目,每个项目都是独立的应用,但是又都依赖于IAM系统提供的用户相关、鉴权相关的能力。

那么如何能够在所有接入IAM系统的应用中,实现一些复用和共享,是我们现在需要解决的问题

npm包的形式

使用npm包将共有业务组件和方法抽离,单独发布,供其他应用安装使用是一种解决方案,也是当前行业使用较多的一种手段。

其主要问题有

  • 更新效率低下:当有需求变化导致npm包更新时,需要所有安装此包的应用都更新一次npm包版本,再各自构建发布一次,过程繁琐不说,如果接入应用很多,会花费相当大的人力物力。
  • 技术栈限制:如果系统中的应用有多个不同的技术栈组成,如bi使用react、gm使用vue等等,那么单一的npm包不能同时适配所有应用。

微前端

微前端概念是从微服务概念扩展而来的,摒弃大型单体方式,将前端整体分解为小而简单的块,这些块可以独立开发、测试和部署,同时仍然聚合为一个产品出现在客户面前

微前端不是一门具体的技术,而是整合了技术、策略和方法的一种宏观架构,这种架构目前有多种方案,都有其利弊之处。

那么微前端有哪些优势

同步更新

对比npm包的发布方式,所有应用都行同步升级包、并走测试发布上线流程,而微前端有同步更新的优势,将共有业务以微前端的方式独立开发、部署、运行,其它应用以HTML/JS Entry的方式集成应用,达到同步更新效果。

技术栈无关

在“乾坤”作者的观点来看,他认为“技术栈无关”才是微前端最重要的优势,一些大型陈旧项目往往使用非常古老的技术,由于年代久远,团队的新成员被这些项目拖住了后退,而重构对于这类项目来说显得过于奢侈。微前端的方式能对这类项目较为轻松的使用“增量升级”,能在旧的应用程序上,使用新的技术逐步的迭代。

简单解耦

微前端的方式能将大型系统的的各个模块分隔成独立的应用、这些应用能够独立开发部署运行,这些轻量的应用更易于开发、测试、交付。

Iframe

从上面的场景和概念中,我们可以发现,如果使用iframe,已经可以用于实现微前端的同步更新、技术栈无关、简单解耦等功能。
事实上、如果一些简单的场景,确实可以使用iframe来实现微前端,但是iframe也有这一些问题

  • url不同步问题,url中无法同时存在 主应用和子应用的状态,也就是说,iframe对于自应用需要绑定路由状态的场景不适用。
  • dom结构不共享,iframe的dom结构是独立,也就是说,在微应用,常规手段无法使其在范围外展示一些信息。
  • 全局上下文不共享,各个微应用之间的通讯和数据同步问题
  • 体验差,iframe的渲染是一次浏览器的重建,导致慢。

Qiankun

乾坤是比较成熟的一款单页微前端框架,提供了加载微应用的能力,有如下特点

  • qiankun是基于single-spa的微前端实现,保留single-spa中优秀的理念,并进一步拓展。
  • 使用html entry的方式接入
  • 样式隔离,可以选择Shadow DOM的方式隔离样式,当然会有元素越界到根元素外的场景
  • js隔离,有Ecmascript最新Realm的提案解决

EMP

emp基于基于Webpack5的新特性Module Federation实现,是js entry的方案,有如下特性

  • 每个微应用独立部署运行,并通过cdn的方式引入主程序中,因此只需要部署一次,便可以提供给任何基于Module Federation的应用使用。并且此部分代码是远程引入,无需参与应用的打包。
  • 动态更新微应用:EMP是通过cdn加载微应用,因此每个微应用中的代码有变动时,无需重新打包发布新的整合应用便能加载到最新的微应用。
  • 去中心化,每个微应用间都可以引入其他的微应用,无中心应用的概念。
  • 跨技术栈组件式调用,提供了在主应用框架中可以调用其他框架组件的能力(目前已支持互相调用的框架及使用方式请参阅官方文档)。
    按需加载,开发者可以选择只加载微应用中需要的部分,而不是强制只能将整个应用全部加载。
  • 应用间通信,每一个应用都可以进行状态共享,就像在使用npm模块进行开发一样便捷。
  • 生成对应技术栈模板,它能像cerate-react-app一样,也能像create-vue-app一样,通过指令一键搭建好开发环境,减少开发者的负担。
  • 远程拉取ts声明文件,emp-cli中内置了拉取远程应用中代码声明文件的能力,让使用ts开发的开发者不再为代码报错而烦恼。
提交

全部评论0

暂时没有评论...