>[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)