單頁(yè)面是指整個(gè)應(yīng)用程序只有一個(gè)唯一完整的 HTML 頁(yè)面，而其它所謂的頁(yè)面，其實(shí)都是組件片段而已，切換頁(yè)面也只是切換一個(gè) HTML 中顯示不同的組件片段。在今后所有的開(kāi)發(fā)項(xiàng)目都是單頁(yè)面應(yīng)用

一、什么是SPA

SPA（single-page-application）就是單頁(yè)應(yīng)用。
它通過(guò)動(dòng)態(tài)重寫(xiě)當(dāng)前頁(yè)面來(lái)與用戶(hù)交互，這種方法避免了頁(yè)面之間切換打斷用戶(hù)體驗(yàn)在單頁(yè)應(yīng)用中，所有必要的代碼（HTML、JavaScript和CSS）都通過(guò)單個(gè)頁(yè)面的加載而檢索，或者根據(jù)需要（通常是為響應(yīng)用戶(hù)操作）動(dòng)態(tài)裝載適當(dāng)?shù)馁Y源并添加到頁(yè)面頁(yè)面在任何時(shí)間點(diǎn)都不會(huì)重新加載，也不會(huì)將控制轉(zhuǎn)移到其他頁(yè)面。
熟悉的JS框架如react , vue , angular , ember都屬于SPA。

二、SPA和MPA的區(qū)別

MPA（MultiPage-page application）就是多頁(yè)應(yīng)用，每一個(gè)頁(yè)面就是主頁(yè)面，都是獨(dú)立的。

區(qū)別：

	單頁(yè)面應(yīng)用（SPA）	多頁(yè)面應(yīng)用（MPA）
組成	一個(gè)主頁(yè)面和多個(gè)頁(yè)面片段	多個(gè)主頁(yè)面
刷新方式	局部刷新	整頁(yè)刷新
url模式	哈希模式	歷史模式
SEO搜索引擎優(yōu)化	難實(shí)現(xiàn)，可使用SSR方式改善	容易實(shí)現(xiàn)
數(shù)據(jù)傳遞	容易	通過(guò)url,cookie,localStorage等傳遞
頁(yè)面切換	速度快、用戶(hù)體驗(yàn)良好	切換加載資源，速度慢，用戶(hù)體驗(yàn)差
維護(hù)成本	相對(duì)容易	相對(duì)復(fù)雜

三、單頁(yè)應(yīng)用的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)

具有桌面應(yīng)用的及時(shí)性、網(wǎng)站的可移植性和可訪(fǎng)問(wèn)性；
用戶(hù)體驗(yàn)好、快，內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面；
良好的前后端分離，分工更加明確。

缺點(diǎn)

不利于搜索引擎的抓??；
首次渲染速度相對(duì)較慢。

四、怎么解決SPA首屏加載速度慢

1、什么是首屏加載

首屏?xí)r間：指的是瀏覽器從響應(yīng)用戶(hù)輸入地址，到首屏內(nèi)容渲染完成的時(shí)間，此時(shí)整個(gè)網(wǎng)頁(yè)不一定要全部渲染完成，但要展示當(dāng)前視窗需要的內(nèi)容

2、加載慢的原因

網(wǎng)絡(luò)延時(shí)問(wèn)題；
資源文件體積是否過(guò)大；
資源是否重復(fù)發(fā)送請(qǐng)求加載；
加載腳本的時(shí)候，渲染內(nèi)容堵塞。

3、解決方案

減小入口文件體積：常用的手段是路由懶加載，把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，待路由被請(qǐng)求的時(shí)候會(huì)單獨(dú)打包路由，使得入口文件變小，加載速度大大增加。在vue-router配置路由的時(shí)候，采用動(dòng)態(tài)加載路由的形式。

routes:[ 
    path: 'Blogs',
    name: 'ShowBlogs',
    component: () => import('./components/ShowBlogs.vue')
]

靜態(tài)資源本地緩存：后端返回資源問(wèn)題：采用HTTP緩存，設(shè)置Cache-Control，Last-Modified，Etag等響應(yīng)頭；采用Service Worker離線(xiàn)緩存。前端合理利用localStorage
UI框架按需加載：在日常使用UI框架，例如element-UI、或者antd，我們經(jīng)常性直接引用整個(gè)UI庫(kù)，但實(shí)際上我用到的組件只有按鈕，分頁(yè)，表格，輸入與警告所以我們要按需引用。

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)

組件重復(fù)打包：假設(shè)A.js文件是一個(gè)常用的庫(kù)，現(xiàn)在有多個(gè)路由使用了A.js文件，這就造成了重復(fù)下載。解決方案：在webpack的config文件中，修改CommonsChunkPlugin的配置。

minChunks: 3 //minChunks為3表示會(huì)把使用3次及以上的包抽離出來(lái)，放進(jìn)公共依賴(lài)文件，避免了重復(fù)加載組件

圖片資源的壓縮：圖片資源雖然不在編碼過(guò)程中，但它卻是對(duì)頁(yè)面性能影響最大的因素。對(duì)于所有的圖片資源，可以進(jìn)行適當(dāng)?shù)膲嚎s，對(duì)頁(yè)面上使用到的icon，可以使用在線(xiàn)字體圖標(biāo)，或者雪碧圖，將眾多小圖標(biāo)合并到同一張圖上，用以減輕http請(qǐng)求壓力。
開(kāi)啟GZip壓縮
使用SSR：也就是服務(wù)端渲染，組件或頁(yè)面通過(guò)服務(wù)器生成html字符串，再發(fā)送到瀏覽器。從頭搭建一個(gè)服務(wù)端渲染是很復(fù)雜的，vue應(yīng)用建議使用Nuxt.js實(shí)現(xiàn)服務(wù)端渲染。

全面的首屏優(yōu)化方式：