對Vue中SPA的理解
1. 什么是SPA？
SPA（single-page application），只有一個HTML頁面，通過路由實現頁面內的局部切換，公共資源部分只加載一次。
我們熟知的JS框架如react,vue,angular,ember都屬於SPA。
2. SPA和MPA的區別
MPA（多頁面應用）
平常寫的普通頁面就是MPA，通過a標簽實現頁面切換，每次切換頁面都要重新加載公共資源部分。
兩者區別
| SPA | MPA | |
|---|---|---|
| 組成 | 一個外殼頁面和多個頁面片段組成 | 多個完整頁面構成 |
| 資源共用（jss，css） | 共用，只在外殼部分加載 | 不共用，每個頁面都要加載 |
| 刷新方式 | 局部刷新或者更改 | 整體刷新 |
| url模式 | 哈希模式（a.com/#/page1.com/#/page2.com） | 歷史模式（a.com/page1.com; a.com/page2.com） |
| 用戶體驗 | 頁面片段切換快，用戶體驗好 | 頁面切換加載慢，體驗不好 |
| 轉場動畫 | 容易實現 | 無法實現 |
| 數據傳遞 | 容易 | 依賴url傳參，或者cookie、localstorage等 |
| 搜索引擎優化（SEO） | 需要單獨方案，實現較為困難 | 簡單 |
| 開發成本 | 難度高，借助專業的框架 | 難度低，但是頁面重復代碼多 |
| 維護成本 | 相對較低 | 相對較高 |
3. SPA的優缺點
優點：
- 1，用戶體驗好，快，內容的改變不需要重新加載整個頁面，基於這一點spa對服務器壓力較小
- 2，前后端分離
- 3，頁面效果會比較炫酷（比如切換頁面內容時的專場動畫）
缺點：
- 1，不利於seo（搜索引擎優化（Search Engine Optimization,SEO）是一種通過了解搜索引擎的運行規則來調整網站，以提高目標網站在有關搜索引擎內排名的方式）；
- 2，導航不可用，如果一定要導航需要自行實現前進、后退。（由於是單頁面不能用瀏覽器的前進后退功能，所以需要自己建立堆棧管理）
- 3，不支持低版本的瀏覽器，最低只支持到IE9
- 4，初次加載時耗時多
- 5，頁面復雜度提高很多
4.SPA的一些解決方法
首屏加載慢
- 首屏時間（First Contentful Paint），指的是瀏覽器從響應用戶輸入網址地址，到首屏內容渲染完成的時間，此時整個網頁不一定要全部渲染完成，但需要展示當前視窗需要的內容
- 首屏加載慢的原因：
在頁面渲染的過程，導致加載速度慢的因素可能如下：
- 網絡延時問題
- 資源文件體積是否過大
- 資源是否重復發送請求去加載了
- 加載腳本的時候，渲染內容堵塞了
- 常見的幾種SPA首屏優化方式
-
減小入口文件積：常用的手段是路由懶加載，把不同路由對應的組件分割成不同的代碼塊，待路由被請求的時候會單獨打包路由，使得入口文件變小，加載速度大大增加。
routes:[ path: 'Blogs', name: 'ShowBlogs', component: () => import('./components/ShowBlogs.vue') ] -
靜態資源本地緩存
-
UI框架按需加載
-
圖片資源的壓縮
-
組件重復打包
假設A.js文件是一個常用的庫，現在有多個路由使用了A.js文件，這就造成了重復下載
解決方案：在webpack的config文件中，修改CommonsChunkPlugin的配置
minChunks: 3
minChunks為3表示會把使用3次及以上的包抽離出來，放進公共依賴文件，避免了重復加載組件 -
開啟GZip壓縮
-
使用SSR
SSR（Server side ），也就是服務端渲染，組件或頁面通過服務器生成html字符串，再發送到瀏覽器
從頭搭建一個服務端渲染是很復雜的，vue應用建議使用Nuxt.js實現服務端渲染