【IT技术服务】IT技术平台微前端技术研究

目前的前端架构，子系统都是在同一个代码仓库，一起打包，一起发布。

随着越来越多的平台建设，在未来会遇到瓶颈，打包会越来越慢，不能各子系统独立开发，独立发布。

众陶料的架构不适应多子系统的建设，所以有了下图左侧的架构，后面说的架构均指左侧架构。

架构图- 1

尝试过增加打包任务，各子系统独立打包任务，独立输出子项目，这样各子项目就可以独立发布了。但这样在子系统之间切换时会发生页面刷新的情况，降低了用户体验。

架构图- 2

基于上面的改造，再去研究其他的解决方案，发现现在逐渐流行的微前端，能解决上述的体验问题。

1. qiankun

(1) 基于single-spa封装

(2) 有沙箱机制

(3) 在蚂蚁内部服务了超过200+ 线上应用

2. icestack

(1) 类似single-spa实现

(2) react技术栈友好

(3) 300+ 应用正在使用

3. single-spa

(1) 主流方案

使用过icestack开发，虽然icestack有物料系统，相当于可快速开发页面、组件，但其天然对react友好，其他vue、angular等框架支持度不高，所以不适合我们使用vue的项目改造。

最终选用的是qiankun。

架构图- 3

通过qiankun，将子系统的代码分离出来，然后通过暴露qiankun的声明周期，让主应用调度。主应用则需要维护各子系统的匹配规则信息。

这个方案具备天然的可扩展性，以后扩展子应用则只需另外新开一个项目，接入主应用即可。研究通过后就能解决了打包越来越慢的问题，各子系统可以独立打包，独立发布。

目前的已经能顺利分离两个子系统，接入了一个重新编写的主应用（主要是不要ssr功能，只需要一套干净的代码），两个子应用能正常切换。