>[success] # single-spa ~~~ 1.官方对 'Single-spa' 介绍 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架 2.single-spa会在基座应用中维护一个路由注册表，每个路由对应一个子应用。基座应用启动以后，当我们切换 路由时，如果是一个新的子应用，会动态获取子应用的 js 脚本，然后执行脚本并渲染出相应的页面；如果是一个 已经访问过的子应用，那么就会从缓存中获取已经缓存的子应用，激活子应用并渲染出对应的页面 ~~~ >[danger] ##### 安装脚手架 ~~~ npm install --global create-single-spa # or yarn global add create-single-spa ~~~ >[danger] ##### 执行脚手架过程中的三个选项 ~~~ 1.'single-spa-application / parcel'：微前端架构中的微应用，可以使用 vue、react、angular 等框架。 2.'single-spa root config'：创建微前端容器应用。 3.'utility modules'：公共模块应用，非渲染组件，用于跨应用共享 javascript 逻辑的微应用 4.为什么形成这三部分，`root-config`是项目的中心，用于启动项目，而`module1`、`module2 等其他模块是独立的，并且可以嵌入到项目中 ~~~  >[danger] ##### 场景上 ~~~ 1.'MPA'：多页面应用将页面部署在不同的URL下，其优点在于各应用技术栈无关，独立开发、独立部署且部署简单。 但缺点也十分明显，由于浏览器页面的重刷，页面切换会出现明显的断点。 2.'SPA'：单页面应用的出现实现了页面的无刷新切换。缺点在于受制于技术，难以兼容不同框架的应用，导致必须 重构的方式支持技术上的变更，大多数这种投入对业务没有帮助。 3.'Single-spa' 刷新的特点，在SPA之上引入新的分层实现应用切换的功能,大概的原理通过，window.location.href 匹配到 url 时，开始走对应子 App 的这一套生命周期嘛。所以，single-spa 还要监听 url 的变化，然后执行子 app 的生命周期流程 4.该方案的核心是'主从'思想，即包括一个基座（MainApp）应用和若干个微（MicroApp）应用，基座应用大多数 是一个前端SPA项目，主要负责应用注册，路由映射，消息下发等，而微应用是独立前端项目，这些项目不限于采 用React，Vue，Angular或者JQuery开发，每个微应用注册到基座应用中，由基座进行管理 ~~~   * 参考来源[# 微前端-最容易看懂的微前端知识](https://juejin.cn/post/6844904162509979662#heading-0) [其他大佬更详细的整理](http://interview.poetries.top/fe-micro-docs/docs/01-%E5%BE%AE%E5%89%8D%E7%AB%AF%E7%9A%84%E8%AF%9E%E7%94%9F.html)