single-spa源码解读

Single-Spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架。

使用

• 主应用入口调用registerApplication注册子应用；调用start方法启动
• 子应用入口导出bootstrap、mount、unmount等生命周期函数

流程概要图

子应用生命周期

apps分类

• appsToUnload NOT_BOOTSTRAPPED或NOT_MOUNTED，非当前应用或状态是SKIP_BECAUSE_BROKEN；

• appsToUnmount MOUNTED，非当前应用或状态是SKIP_BECAUSE_BROKEN；

• appsToLoad LOAD_ERROR且过了200ms，当前应用且状态不是SKIP_BECAUSE_BROKEN； NOT_LOADED或LOADING_SOURCE_CODE，当前应用且状态不是SKIP_BECAUSE_BROKEN；

• appsToMount NOT_BOOTSTRAPPED或NOT_MOUNTED，当前应用且状态不是SKIP_BECAUSE_BROKEN；

主流程

registerApplication参数

两种形式

• registerApplication(appName, applicationOrLoadingFn, activityFn, customProps?)
• registerApplication({name, app, activeWhen, customProps?})

1. appName / name 应用名称，不能重复

2. applicationOrLoadingFn / app 加载函数，返回一个应用或一个Promise

3. activityFn / activeWhen 纯函数：当前应用被激活时返回真
   activeWhen还可以是字符串：路径前缀

4. customProps 在生命周期钩子函数执行时会被作为参数传入

关键函数reroute

生命周期函数执行

toLoadPromise已在上图中