Vue SPA單頁面的應用和對比

2022-08-05 22:01:02

一、什麼是SPA

SPA（single-page-application）就是單頁應用。
它通過動態重寫當前頁面來與使用者互動，這種方法避免了頁面之間切換打斷使用者體驗在單頁應用中，所有必要的程式碼（HTML、JavaScript和CSS）都通過單個頁面的載入而檢索，或者根據需要（通常是為響應使用者操作）動態裝載適當的資源並新增到頁面頁面在任何時間點都不會重新載入，也不會將控制轉移到其他頁面。
熟悉的JS框架如react , vue , angular , ember都屬於SPA。

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

區別：

	單頁面應用（SPA）	多頁面應用（MPA）
組成	一個主頁面和多個頁面片段	多個主頁面
重新整理方式	區域性重新整理	整頁重新整理
url模式	雜湊模式	歷史模式
SEO搜尋引擎優化	難實現，可使用SSR方式改善	容易實現
資料傳遞	容易	通過url,cookie,localStorage等傳遞
頁面切換	速度快、使用者體驗良好	切換載入資源，速度慢，使用者體驗差
維護成本	相對容易	相對複雜

優點

缺點

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

減小入口檔案體積：常用的手段是路由懶載入，把不同路由對應的元件分割成不同的程式碼塊，待路由被請求的時候會單獨打包路由，使得入口檔案變小，載入速度大大增加。在vue-router設定路由的時候，採用動態載入路由的形式。

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

靜態資源本地快取：後端返回資源問題：採用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檔案是一個常用的庫，現在有多個路由使用了A.js檔案，這就造成了重複下載。解決方案：在webpack的config檔案中，修改CommonsChunkPlugin的設定。

minChunks: 3 //minChunks為3表示會把使用3次及以上的包抽離出來，放進公共依賴檔案，避免了重複載入元件

圖片資源的壓縮：圖片資源雖然不在編碼過程中，但它卻是對頁面效能影響最大的因素。對於所有的圖片資源，可以進行適當的壓縮，對頁面上使用到的icon，可以使用線上字型圖示，或者雪碧圖，將眾多小圖示合併到同一張圖上，用以減輕http請求壓力。
開啟GZip壓縮
使用SSR：也就是伺服器端渲染，元件或頁面通過伺服器生成html字串，再傳送到瀏覽器。從頭搭建一個伺服器端渲染是很複雜的，vue應用建議使用Nuxt.js實現伺服器端渲染。

全面的首屏優化方式：

到此這篇關於Vue SPA單頁面的應用和對比的文章就介紹到這了,更多相關Vue SPA單頁面內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！