快捷導(dǎo)航

Vue SPA單頁面的應(yīng)用和對(duì)比

更新時(shí)間：2022年08月05日 15:55:25 作者：飯啊飯°

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

一、什么是SPA

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

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

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

區(qū)別：

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

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

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

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

缺點(diǎn)

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

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

1、什么是首屏加載

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

2、加載慢的原因

網(wǎng)絡(luò)延時(shí)問題；
資源文件體積是否過大；
資源是否重復(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)資源本地緩存：后端返回資源問題：采用HTTP緩存，設(shè)置Cache-Control，Last-Modified，Etag等響應(yīng)頭；采用Service Worker離線緩存。前端合理利用localStorage
UI框架按需加載：在日常使用UI框架，例如element-UI、或者antd，我們經(jīng)常性直接引用整個(gè)UI庫，但實(shí)際上我用到的組件只有按鈕，分頁，表格，輸入與警告所以我們要按需引用。

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

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

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

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

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