>[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 等其他模块是独立的,并且可以嵌入到项目中 ~~~ ![](https://img.kancloud.cn/22/79/2279c686916a64d701afbd4cb98fc218_641x333.png) >[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://img.kancloud.cn/f3/7c/f37c0bff36111d69aca01a7184089beb_752x609.png) ![](https://img.kancloud.cn/5f/3c/5f3c8f4229685f29f062b490520db04c_488x413.png) * 参考来源[# 微前端-最容易看懂的微前端知识](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)