single-spa基础
大约 2 分钟
single-spa 基础
single-spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架。
实现方法
single-spa 提供了一种基于路由的基座化的微前端方案，它将应用分为两类：基座应用和子应用。其中，子应用对应需要聚合的应用，基座应用是另外一个单独的应用，用于聚合子应用。
在基座应用中，我们会维护一个路由注册表 - 每个路由对应一个子应用。基座应用启动以后，当我们切换路由时，如果是一个新的子应用，会动态获取子应用的 js 脚本，然后执行脚本并渲染出相应的页面；如果是一个已经访问过的子应用，那么就会从基座应用的缓存中获取已经缓存的子应用，激活子应用并渲染出对应的页面。
single-spa 项目模板
这里使用 vite+vue 作为基座项目，分别引入 vue2，vue3，react 作为子项目
single-spa 的不足
复杂的子应用加载逻辑
- 图片、css 等静态资源的加载
- 不同子应用的打包生成的入口文件的名称、数量不一致
- 子应用更新导致打包文件 hash 值发生变化
- 懒加载
应用之间的 js、css 隔离
由于多个应用(基座应用 + 子应用、子应用 + 子应用)共存，我们就需要特别关注各个应用之间全局变量(如 window)、样式不能相互干扰。
子应用切换遗留的副作用
尽管子应用会提供 unmount 生命周期方法供基座应用在切换子应用时调用，但依然会遗留一些副作用
- 子应用定义的 setInterval
- 子应用通过 window.addEventListener 注册的事件
- 子应用添加修改的 window 对象的属性
- 子应用动态添加的 dom 节点，如 style 节点
子应用状态恢复
需要在重新挂载子应用时，恢复子应用之前的状态，如子应用之前修改的 window、子应用动态添加的 style 等。这就要求我们需要在卸载子应用时，存储上述状态，然后在子应用重新挂载时，将存储的状态恢复。
子应用预加载
在使用 single-spa 进行微前端开发时，我们也可以应用资源预加载这种优化手段，在当前子应用工作过程中，利用空闲时间，提前加载其他子应用所需的资源，使得下一个子应用可以快速打开。