正在成型的巨石应用,项目该如何大而化小?

3,305 阅读3分钟

缘由

忙里偷闲,可算有点时间来写文章了。另外这篇文章也会当做一个内部讲稿过程吧。

一、项目背景

从我入职到这家公司开始我就有预感,这个项目会非常的大。而且会越来越大杂烩,需要承载集团内部海量的业务。我从入职的前两个就做出来了根据我上家公司的微前端架构模式,希望得到推广。并且改善这种我预感会成为巨石应用的的单体项目,但是主任就劝我不要多度设计,先走路,等遇到了再处理。但是我是那种未雨绸缪的那种,果不其然问题终会爆发。项目也越来越大,目前页面已经有100+了(半年)

pc管理端,无兼容要求

1、需求无止境的来,导致了必然存在并行两条以上的同项目多分支开发

2、必须吐槽一句,主任想着什么都堆在一个项目中,等于一个项目要承载集团巨型的业务量

3、多分支带来的合并冲突,吐槽vscode垃圾,git合并真不好使(我用webstrom的,所以大家遇到大量冲突问题总是让我来合并)

4、项目来的时候是后端从网上爬的element-admin,作为一个有追求的前端,所以我不断的把人家的东西换成了我自己的。底层来了一套重构,不断的在重构,加入规范,约束团队

5、分支切大了,结果需要部分内容先上线,做不了

引用下字节跳动遇到的问题

  • 项目的团队成员来自多个团队
  • 项目内多条迭代出现需求挤兑,影响测试、发布效率
  • 跨空间、跨时间维度导致团队内技术体系无法统一
  • 多个前端应用需要达到「内聚的单个产品」特征
  • 「内聚的单个产品」中部分内容希望达到独立开发、独立发布、独立测试、独立灰度等能力

这些问题都在逐渐的成为我现在这个项目的问题。

所以需要这样的一个架构

二、技术方案

1、qiankunjs:qiankun.umijs.org/

2、京东的:micro-zoe.github.io/micro-app/d…

3、字节跳动:garfish.top/quick-start

4、webpack5联邦模块(emp):webpack.docschina.org/concepts/mo…

主要分为类似iframe方案和联邦模块

类似iframe

虽然有很多小问题需要解决,但是这个方案是最成熟的,并且大家都需要iframe是最早最完美的微前端。可惜一些难以解决的问题导致iframe并不是最优解决方案。

缺点:

1、多项目之间的组件共享

2、容器固定,如何解决多容器问题?

联邦模块

看似完美,实际上存在巨大隐患。

1、需要所有项目核心技术栈保持一致

2、实际上是把workspace分散到了各个项目当中

3、不够成熟,主要只下属依赖的工具链方面不够成熟(恩,说的就是你vuecli,我至今没有用vuecli跑通过)

三、我目前遇到的问题

1、我可以完全把所有模块独立成子项目,但是项目前期做了几十个公共组件,该如何共享解决呢?全部都独立出去,那么我共享模块就成了空谈。

2、veucli5-rc1依旧不稳定,我想用webpack5来解决模块共享的问题,但是项目是基于vuecli构建的,那么vuecli对于联邦模块的bug导致了我无法更好的解决这个问题。

3、也不知道京东和字节是如何解决上面架构图中主框架共享模块的问题

还需要继续等待……