Vue?SPA首屏加載緩慢問題如何解決

本文小編為大家詳細介紹“Vue SPA首屏加載緩慢問題如何解決”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue SPA首屏加載緩慢問題如何解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

首屏加載

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

首屏加載可以說是用戶體驗中最重要的環節

關于計算首屏時間

利用performance.timing提供的數據：

通過DOMContentLoad或者performance來計算出首屏時間

// 方案一：
document.addEventListener('DOMContentLoaded', (event) => {console.log('first contentful painting');
});
// 方案二：
performance.getEntriesByName("first-contentful-paint")[0].startTime
// performance.getEntriesByName("first-contentful-paint")[0]
// 會返回一個 PerformancePaintTiming的實例，結構如下：
{name: "first-contentful-paint",entryType: "paint",startTime: 507.80000002123415,duration: 0,
};

加載慢的原因

在頁面渲染的過程，導致加載速度慢的因素可能如下：

• 網絡延時問題

• 資源文件體積是否過大

• 資源是否重復發送請求去加載了

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

解決方案

常見的幾種SPA首屏優化方式

• 減小入口文件積

• 靜態資源本地緩存

• UI框架按需加載

• 圖片資源的壓縮

• 組件重復打包

• 開啟GZip壓縮

• 使用SSR

減小入口文件體積

常用的手段是路由懶加載，把不同路由對應的組件分割成不同的代碼塊，待路由被請求的時候會單獨打包路由，使得入口文件變小，加載速度大大增加

在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 ElementUI from 'element-ui'
Vue.use(ElementUI)

但實際上我用到的組件只有按鈕，分頁，表格，輸入與警告 所以我們要按需引用

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壓縮

拆完包之后，我們再用gzip做一下壓縮 安裝compression-webpack-plugin

cnmp i compression-webpack-plugin -D 

在vue.congig.js中引入并修改webpack配置

const CompressionPlugin = require('compression-webpack-plugin')

const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {if (process.env.NODE_ENV === 'production') {// 為生產環境修改配置...config.mode = 'production'return {plugins: [new CompressionPlugin({test: /.js$|.html$|.css/, //匹配文件名threshold: 10240, //對超過10k的數據進行壓縮deleteOriginalAssets: false //是否刪除原文件})]}}

在服務器我們也要做相應的配置 如果發送請求的瀏覽器支持gzip，就發送給它gzip格式的文件我的 服務器是用express框架搭建的 只要安裝一下compression就能使用

const compression = require('compression')
app.use(compression())// 在其他中間件使用之前調用

使用SSR

SSR（Server side ），也就是服務端渲染，組件或頁面通過服務器生成html字符串，再發送到瀏覽器

從頭搭建一個服務端渲染是很復雜的，vue應用建議使用Nuxt.js實現服務端渲染。

讀到這里，這篇“Vue SPA首屏加載緩慢問題如何解決”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。