微前端解决方案1 - 思考

近一两年,微前端架构,在‘巨石’应用中大放异彩,以可维护性高,模块耦合低等诸多特性,被很多大厂采用实践。那么,在vue单一技术栈中,怎样落地微前端架构?在这里,我借鉴了码云王圣松同学的微前端分享,与 https://alili.tech/ 博客中的前端微服务化思路进行实践,提供适合vue单一技术栈的解决方案。

ps:实践代码采用github外链形式在文章底部,文章中仅提供关键思路以及代码,如有需要自行下载。

思考(Why do this?)

  1. 我司xxx项目一开始,从项目开发角度看即是一个“巨石”应用,为了保持巨石应用的可维护性。
  2. 公司需要一套业务模块化方案来解决目前代码冗余,每期开发都相当于重写,因而带来的成本问题。
  3. 产品需要一套业务模块化方案来解决业务之间耦合,不能实现插件化的问题。

代码设计

既然是选型做微前端,当然选型 single-spa 做微前端的基石。当然,为了实现轻松容易,需有良好的设计,才能事半功倍。

以下是设计部分:

模块化加载器

  1. 自动发现所有模块中的配置文件(manifest),合并生成一个manifests放在base项目根目录下,这样就可以通过请求来读取对应配置, 同时base根目录有配置文件时候需要优先使用配置文件(后端可以读写文件做插件化)。

  2. 读取配置文件后,如果是开发环境则需要先在项目启动的时候对子模块生成端口代理(proxy解决跨域问题),生产环境则跳过。base项目读取到manifest后,循环队列,请求到对应使用singlespa注册方法进行循环注册。

  3. 注册会请求对应端口或路径下的stats.json统计文件,请求,并加载在dom上,js运行,对应的singlespa子模块实例就会被挂载在window对象上。

  4. singlespa注册会去拿manifest的信息和window上的实例一起进行注册。

消息总线

  1. 先将store改写,去掉vuex实例化,只导出配置,在webpack配置中将store的路径添加到entry入口。

  2. 在模块加载器步骤3 后,会去拿window上对应命名空间下的store,在注册时使用customprops自动派发到所有子模块。

  3. 子模块接受到再注入到自己的this.$store。

路由分发(动态路由)

动态路由是为了左侧菜单动态展示,和菜单权限配置。

  1. router部分保持之前的,在router.js内进行实例化,在main.js引入,需要增加的是导出routes配置。

  2. routes配置在本模块的store引入,这样,base模块消息总线贯通后就可以直接获取对应命名空间下的router,进而拼出一个完整版本的路由。

构建部署

构建和部署,就是需要看产品需要了,

  1. 方案1,跟开发一样,多个端口部署多个模块,利用nginx,进行代理配合。
  2. 方案2,都部署在一个文件夹内,根据路径来区分不同模块。可以节约端口,但是失去了独立部署的优势。

至此,一个基础版的微前端方案,就设计完毕了。那么,怎样去实现这套方案呢?

未完,待续 …

项目链接:https://github.com/shifeng1993/single-spa-demo

本文作者: haise
本文地址https://www.shifeng1993.com/2020/04/06/project_microFrontend1/
版权声明: 转载请注明出处!