微前端初窥:技术方案调研

161 阅读2分钟

背景

公司新启动了一个项目,这个项目由 A、B、C 三个平台集合而成,从产品原型来看,它们有以下特点:

  1. A、B项目有大量相同的页面或者是弹框类组件重复
  2. A、B、C 项目需要使用同一套登录系统

从我架构的视角来看,思考需要以下的东西:

  1. 一个主应用作为外框,其它子应用要设置为可插拔的模式
  2. 子应用可以作为npm包的形式物料化
  3. 主应用有一个子应用为物料库,来实现可视化的物料文档

image.png

技术调研

出于对项目的特殊性,我们考虑了几个技术方案

方案1 SSO 单点登录

另外开一个 D 系统,作为权限账号类管理系统,通过 D 系统来登录

方法是在 A、B、C 每个系统中嵌入一套 SSO 的 SDK,缺点是每次都需要页面跳转来获取授权

方案2 微前端

尝试使用子母项目架构的形式去开发,类似平台的项目组件化。

每个单项目作为母平台的一个组件,优势在于每个项目可以直接使用同一套登录信息,不需要跳转,很丝滑的路由切换

另外它们还有如下的优势:

  1. 更好的拓展性,将每个模块拆分的各个仓库,一键上下架使用,后续也可以按需添加子应用,方便
  2. 当项目变的巨大的时候,可以以项目组件的形式按模块打包,降低开发时间成本

当然也有麻烦的地方就是,学习成本稍微高一点,除了要了解微前端相关的内容之外,还得去了解关于nginx的配置,这就表示前端不仅仅是前端,你也得了解一些前端之外的东西了

选择

最后在网上搜索了n个关于微前端的解决方案之后,对比了一下还是使用 qiankun

理由有几个方面的,因为公司的大体技术栈是偏react方向,所以在选择开发框架的时候一直都是 antd + dva那一套

正巧官方有个企业级框架umi,umi又有一个全家桶叫 umi/max,里面内置了 antd、dva、useRequest、qiankun...等等

我项目工期也恰好很赶,你说巧不巧,你让我再去从0开始去学其它的我是不愿意的,我懒,可以在有限的时间,达到最大的效率是我一直追求的,一个合格的开发也是要每天有最少7小时睡眠的

下一期,我出一篇《qiankun + umi + nginx 开发部署流程》,记录一下

今天其实已经算是踩了很多坑了