一、什么是SPA

• SPA（single-page-application）就是單頁應(yīng)用。
• 它通過動態(tài)重寫當(dāng)前頁面來與用戶交互，這種方法避免了頁面之間切換打斷用戶體驗(yàn)在單頁應(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)用的優(yōu)缺點(diǎn)

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

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

缺點(diǎn)

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

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

1、什么是首屏加載

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

2、加載慢的原因

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

3、解決方案

減小入口文件體積：常用的手段是路由懶加載，把不同路由對應(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庫，但實(shí)際上我用到的組件只有按鈕，分頁，表格，輸入與警告 所以我們要按需引用。

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實(shí)現(xiàn)服務(wù)端渲染。

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

到此這篇關(guān)于Vue SPA單頁面的應(yīng)用和對比的文章就介紹到這了,更多相關(guān)Vue SPA單頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！