介绍

Single-spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架。 使用 single-spa 进行前端架构设计可以带来很多好处，例如:

• 在同一页面上使用多个前端框架 而不用刷新页面 (React, AngularJS, Angular, Ember, 你正在使用的框架)。
• 独立部署每一个单页面应用。
• 新功能使用新框架，旧的单页应用不用重写可以共存。
• 改善初始加载时间，延迟加载代码。

内容

single-spa 在微应用的层面做了如下的事情：

• 微应用管理
• 微应用生命周期管理
• 路由管理

我们知道只有这些功能对于构建微前端应用时远远不够的，因为还有很多核心问题没有解决。因此，qiankun 在 single-spa 的基础上做了如下的事情：

• 封装、简化后的应用管理和应用生命周期（门面模式）。
• JavaScript 沙箱：代理沙箱和快照沙箱。
• 微应用的加载方案，模板解析、应用加载、应用钩子，支持各种 JavaScript 框架和 vanillaJS、JQuery 等。
• CSS 沙箱方案。
• 功能加强，如 prefetch 应用预加载、globalState 微应用、主应用（基座应用）通信方案。

single-spa 具有很灵活的使用场景，基于 single-spa 可以封装出适合企业的各种轻量级的微前端的框架。

声明

在文章中可能遇到的简写：

概念	简写	描述
single-spa	s-spa	single-spa 框架
微应用	应用	框架所管理的微前端子应用
父应用、基座应用	/	加载微应用的基座应用

提示

您可以自由选择 qiankun源码 和 single-spa源码 的阅读顺序，这取决于您希望自顶向下还是自底向上了解微应用。

前提

建议您先阅读一下内容：

• single-spa | 概念 (opens new window)等微前端概念、s-spa 的设计理念等内容。

微前端

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

微前端类型

在 single-spa 中，有以下三种微前端类型：

1. single-spa applications (opens new window): 为一组特定路由渲染组件的微前端。

2. single-spa parcels (opens new window): 不受路由控制，渲染组件的微前端。

3. utility modules (opens new window): 非渲染组件，用于暴露共享 javascript 逻辑的微前端。

一个 web 应用可能包含一种或多种类型的微前端。差异可见深入对比 (opens new window)，我们推荐微前端类型选择 (opens new window)。

参考

Getting Started with single-spa | single-spa (opens new window)