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

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

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

區(qū)別：

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

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

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

缺點(diǎn)

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

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

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

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

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

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

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

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

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