作者：京东物流 宁冲

1 前言

什么是微前端？
微前端是指存在于浏览器中的微服务。

本文次要通过对微前端框架single-spa的基座利用加载子利用的single-spa-vue函数库进行剖析，通过代码维度剖析让大家理解在single-spa加载子利用的时候都做了哪些事件。如何通过优化single-spa-vue函数库放弃子利用的状态。

因为是在代码维度进行剖析，要求读者对single-spa有肯定的理解，浏览成果会更好。

2 single-spa加载子利用的过程

基座利用中配置的加载子利用配置，在配置子利用对象的app办法中会把子利用chunk-vendors.js、app.js插入到页面，并且执行chunk-vendors.js、app.js两个子利用依赖的js。

app办法执行完结当前，子利用依赖的js插入页面当前的dom构造。

由下面app办法的执行过程，咱们能够看出基座利用加载子利用，和vue框架打包后加载js资源的形式相似。那么为什么只须要加载子利用的app.js和chunk-vendors.js就能够把子利用渲染到页面下面。上面咱们再来看看子利用的入口文件main.js办法中是如何进行配置的。

3 子利用的main.js中的配置

在子利用main.js中咱们能够看到，把惯例的配置1替换为配置2的格局。

在配置2中咱们会把以后vue的配置传给single-spa-vue函数库中。包含el、render办法、Vue对象。通过singleSpaVue的包装，返回single-spa生命周期办法bootstrap、mount、unmount。

  • bootstrap：疏导函数，利用内容首次挂载到页背后调用，只会执行一次。
  • mount：挂载函数，子利用每次被挂载的时候都会执行。
  • unmount：卸载函数，子利用每次被卸载的时候都会执行。

也就是说基座利用在加载子利用的时候就是通过single-spa-vue函数的解决，生成了single-spa的各个生命周期，给基座利用在加载子利用的时候调用。
上面咱们来看看single-spa-vue到底是如何生成各种生命周期函数的。

4 single-spa-vue源码构造

single-spa-vue函数库能够帮忙咱们来生成加载子利用的生命周期。你能够通过上面链接：single-spa-vue GIT地址，下载single-spa-vue函数库的源码。
single-spa-vue的源码非常简单，只有几个生成single-spa生命周期的函数。

  • single-spa-vue办法：single-spa-vue函数库对外提供服务的惟一一个办法，用来接管配置项，并且返回一个蕴含各个single-spa生命周期的对象。
  • single-spa-vue中的其余办法bootstrap、mount、update、unmount是用来生成single-spa对应生命周期函数的办法。

上面咱们具体介绍一下这几个办法的作用和实现。

5 single-spa-vue源码解析

single-spa-vue中提供的singleSpaVue办法会接管userOpts配置信息，配置信息会和默认的配置项defaultOpts合并当前再进行进行后续解决。

5.1 配置项defaultOpts

对于默认的配置项会有上面这几项，这里只介绍一下必填项，appOptions、Vue/createApp。其中的template在并没有在single-spa-vue中被用到，然而在single-spa-html中有应用到。

  1. // 默认配置项列表
  2. const defaultOpts = {
  3. // required opts
  4. appOptions: null,
  5. template: null,
  6. // sometimes require opts
  7. Vue: null,
  8. createApp: null,
  9. handleInstance: null
  10. }

1）appOptions配置项介绍

  • appOptions：利用的配置项，会在初始化Vue实例的时候作为参数传给Vue办法，上面具体介绍一下appOptions中的配置项。
  • el：子利用须要挂载的基座dom，即vue须要挂载的dom。
  • render/template：vue的render/template配置项。
  • data：初始化的参数对象，会在执行挂载函数mount的时候间接挂载到vue实例上。

2）Vue/createApp配置项介绍

Vue/createApp配置项是用来生成vue实例的，single-spa-vue函数库能够通过传入的Vue对象在mount办法中来生成vue实例。也能够传入createApp办法，由子利用在createApp办法中返回vue实例。

上面咱们会在生命周期生成办法中看到这些配置项的作用

5.2 入口办法：singleSpaVue

singleSpaVue办法会对入参先进行下列有效性校验，具体校验的内容有一下四项。

  1. 配置项userOpts是否为对象。
  2. 用来创立vue实例的配置Vue/createApp是否存在。
  3. 用来生成vue实例的配置项appOptions是否存在。
  4. vue实例挂载的dom是否正确appOptions.el有效性校验。

有效性校验通过当前，会调用bootstrap、mount、unmount、update办法用来别离生成single-spa加载子利用的生命周期函数。
上面具体介绍一下各个生命周期函数是如何生成的。

5.3 疏导函数：bootstrap

疏导函数bootstrap，当利用内容首次挂载到页背后调用。

bootstrap函数，会先判断一下是否在配置项中存在loadRootComponent。配置项loadRootComponent笔者了解是能够用来加载以后子利用依赖的父级利用或者其余的依赖资源。
比方A页面依赖B组件，那在加载A页面的时候能够loadRootComponent办法中把B组件的动态资源加载下来，并且渲染到页面上，A页面就能够间接应用B组件中提供的一些资源或者dom。
如果未配置loadRootComponent，则间接返回，不做任何解决。

5.4 子利用挂载生命周期：mount

在子利用每次被挂载到页面上的时候，single-spa会执行mount生命周期函数，single-spa-vue在mount函数中用来初始化子利用的vue实例，并且把实例挂载到页面上。
mount函数会接管三个参数，别离是singleSpaVue传入的参数opts，single-spa-vue以后全局挂载的子利用实例列表mountedInstances，在基座利用中注册的以后子利用的single-spa实例props
props入参接管的数据，这里只用到了props的name属性，用来标识以后挂载的子利用。

在mount办法中次要做了以下几件事

1）格式化利用配置项appOptions

mount办法中会通过resolveAppOptions办法来格式化利用的配置项appOptions。
在resolveAppOptions办法来中如果appOptions是一个办法的话，则执行办法，并且传递基座利用通过customProps参数传入的参数props。
子利用能够在appOptions办法中获取父利用传递的参数、依据父利用的状态做不同的解决等。

2）初始化子利用须要挂载的DOM对象。

初始化dom的配置和办法比拟多，会从很多个配置项中来获取el，代码比较简单，这里就不赘述了。只列出来取值的优先级供大家参考。
appOptions.el > props.domElement > props.name

dom节点被格式化实现当前，上面就开始把页面挂载到dom下面。

3）创立vue示例，并且挂载到页面上

在挂载页面之前会有一个配置项：replaceMode，replaceMode配置项是用来标识是否须要替换el节点下的内容。默认replaceMode为false是会在el节点上面新建一个class为single-spa-container的空白div来保留子利用。

以demo中的代码为例：

默认replaceMode为false的状况下，基座中的的内容和vue1中的内容会并存。如下图：

如果把replaceMode改为true的状况下，会发现基座中的内容会被vue1中的内容笼罩掉。
如下图：

设置挂载形式当前，就开始把子利用真正挂载到dom下面。
这里反对两种挂载形式，一种是应用vue3的createApp形式挂载，一种是应用vue2的new Vue形式进行挂载。这里的挂载形式其实和咱们在应用vue挂载到dom形式的配置是一样的。

通过下面的步骤，此时子利用就被挂载到了html的页面中的dom上了。

5.5 更新生命周期函数：update

当调用parcel.update()会触发update办法，笔者因为并没有用的高级个性parcel，在此处不再做过多介绍。

5.6 子利用卸载生命周期：unmount

当页面url发生变化的时候，来到子利用页面路由的时候会触发unmount办法。
在unmount办法中次要做的事件有：

  1. 卸载vue利用
  2. 删除vue实例
  3. 同时清空页面dom。

执行unmount操作当前子利用的数据和dom就会被革除洁净。

5.7 小结

以上就是single-spa官网提供的single-spa-vue函数库来挂载子利用的全副流程。通过下面的剖析，咱们发现single-spa-vue函数库会通过调用singleSpaVue办法返回一个蕴含bootstrap、mount、update、unmount四个办法的对象。在基座利用加载子利用的生命周期会执行对应的办法，通过执行办法把子利用挂载到基座利用或者从基座利用销毁子利用。

通过single-spa-vue中加载子利用的过程，single-spa把各个子利用组装成一个简单的利用，在用户无感的状况下对各个子利用进行别离治理。

single-spa在加载子利用的时候，除了vue的版本之外，还有其余的版本，然而加载的思路相似，都是在函数库中来把子利用加载到html中，此处不再介绍其余类型的加载。
single-spa其余加载子利用形式：single-spa-react、single-spa-html

6 子利用状态放弃

在理论开发的过程中笔者遇到有些页面须要应用vue中的keep-alive来保留状态，在页面切换的过程中尽管页面被销毁然而页面状态须要在保留，然而咱们在剖析single-spa-vue的unmount办法实现的时候发现，如果页面切换，子利用和vue实例被销毁，此时子利用中的keep-alive是没有失效的。

如下图：

当在input中输出内容当前，传统的spa我的项目能够通过keep-alive来记录状态，当页面路由切换当前，再切回来，依然放弃状态。然而如果间接应用single-spa-vue，当子利用触发unmount的时候input中的输出内容1111会被清空。针对这种状况，笔者对single-spa-vue类库进行了一些革新。

革新内容如下：

6.1 子利用由销毁改为暗藏

在single-spa-vue配置项中减少了一个配置项，依据配置项中是否存在isKeepAlive配置项，来判断把以后的dom暗藏掉，还是删除。这样当子利用unmount办法触发的时候，子利用并未被删除，而是依然保留。

同时笔者对vue的route配置也进行了一些优化，当页面不存在的时候，此时会把子利用中的一个空组件挂载到dom下面，防止尽管页面被暗藏掉，然而dom依然在html中，导致页面dom过多。

6.2 子利用由新建改为显示

在single-spa-vue配置项中调用mount办法挂载子利用的时候，会判断以后子利用是否存在，如果子利用存在则间接把子页面显示进去，因为子利用并未被销毁，此时子利用中的keep-alive就会始终失效，并且保留页面的状态。

通过对single-spa-vue类库的mount、unmount办法的优化，用户在应用页面的时候真正和应用vue那样晦涩，并且能够放弃页面状态，晋升用户的体验。