Vue?SPA單頁面的應用和對比實例分析

這篇文章主要介紹了Vue SPA單頁面的應用和對比實例分析的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue SPA單頁面的應用和對比實例分析文章都會有所收獲，下面我們一起來看看吧。

一、什么是SPA

• SPA（single-page-application）就是單頁應用。

• 它通過動態(tài)重寫當前頁面來與用戶交互，這種方法避免了頁面之間切換打斷用戶體驗在單頁應用中，所有必要的代碼（HTML、JavaScript和CSS）都通過單個頁面的加載而檢索，或者根據(jù)需要（通常是為響應用戶操作）動態(tài)裝載適當?shù)馁Y源并添加到頁面頁面在任何時間點都不會重新加載，也不會將控制轉移到其他頁面。

• 熟悉的JS框架如react , vue , angular , ember都屬于SPA。

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

MPA（MultiPage-page application）就是多頁應用，每一個頁面就是主頁面，都是獨立的。

區(qū)別：

三、單頁應用的優(yōu)缺點

優(yōu)點

• 具有桌面應用的及時性、網站的可移植性和可訪問性；

• 用戶體驗好、快，內容的改變不需要重新加載整個頁面；

• 良好的前后端分離，分工更加明確。

缺點

• 不利于搜索引擎的抓??；

• 首次渲染速度相對較慢。

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

1、什么是首屏加載

首屏時間：指的是瀏覽器從響應用戶輸入地址，到首屏內容渲染完成的時間，此時整個網頁不一定要全部渲染完成，但要展示當前視窗需要的內容

2、加載慢的原因

• 網絡延時問題；

• 資源文件體積是否過大；

• 資源是否重復發(fā)送請求加載；

• 加載腳本的時候，渲染內容堵塞。

3、解決方案

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

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

• 靜態(tài)資源本地緩存：后端返回資源問題：采用HTTP緩存，設置Cache-Control，Last-Modified，Etag等響應頭；采用Service Worker離線緩存。前端合理利用localStorage

• UI框架按需加載：在日常使用UI框架，例如element-UI、或者antd，我們經常性直接引用整個UI庫，但實際上我用到的組件只有按鈕，分頁，表格，輸入與警告 所以我們要按需引用。

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

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

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

• 圖片資源的壓縮：圖片資源雖然不在編碼過程中，但它卻是對頁面性能影響最大的因素。對于所有的圖片資源，可以進行適當?shù)膲嚎s，對頁面上使用到的icon，可以使用在線字體圖標，或者雪碧圖，將眾多小圖標合并到同一張圖上，用以減輕http請求壓力。

• 開啟GZip壓縮

• 使用SSR：也就是服務端渲染，組件或頁面通過服務器生成html字符串，再發(fā)送到瀏覽器。從頭搭建一個服務端渲染是很復雜的，vue應用建議使用Nuxt.js實現(xiàn)服務端渲染。

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

關于“Vue SPA單頁面的應用和對比實例分析”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue SPA單頁面的應用和對比實例分析”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道。