Vue?SPA首屏加載緩慢問(wèn)題如何解決

本文小編為大家詳細(xì)介紹“Vue SPA首屏加載緩慢問(wèn)題如何解決”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue SPA首屏加載緩慢問(wèn)題如何解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

首屏加載

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

首屏加載可以說(shuō)是用戶體驗(yàn)中最重要的環(huán)節(jié)

關(guān)于計(jì)算首屏?xí)r間

利用performance.timing提供的數(shù)據(jù)：

通過(guò)DOMContentLoad或者performance來(lái)計(jì)算出首屏?xí)r間

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

加載慢的原因

在頁(yè)面渲染的過(guò)程，導(dǎo)致加載速度慢的因素可能如下：

• 網(wǎng)絡(luò)延時(shí)問(wèn)題

• 資源文件體積是否過(guò)大

• 資源是否重復(fù)發(fā)送請(qǐng)求去加載了

• 加載腳本的時(shí)候，渲染內(nèi)容堵塞了

解決方案

常見(jiàn)的幾種SPA首屏優(yōu)化方式

• 減小入口文件積

• 靜態(tài)資源本地緩存

• UI框架按需加載

• 圖片資源的壓縮

• 組件重復(fù)打包

• 開(kāi)啟GZip壓縮

• 使用SSR

減小入口文件體積

常用的手段是路由懶加載，把不同路由對(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')
]

以函數(shù)的形式加載路由，這樣就可以把各自的路由文件分別打包，只有在解析給定的路由時(shí)，才會(huì)加載路由組件

靜態(tài)資源本地緩存

后端返回資源問(wèn)題：

• 采用HTTP緩存，設(shè)置Cache-Control，Last-Modified，Etag等響應(yīng)頭

• 采用Service Worker離線緩存

前端合理利用localStorage

UI框架按需加載

在日常使用UI框架，例如element-UI、或者antd，我們經(jīng)常性直接引用整個(gè)UI庫(kù)

import ElementUI from 'element-ui'
Vue.use(ElementUI)

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

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

組件重復(fù)打包

假設(shè)A.js文件是一個(gè)常用的庫(kù)，現(xiàn)在有多個(gè)路由使用了A.js文件，這就造成了重復(fù)下載

解決方案：在webpack的config文件中，修改CommonsChunkPlugin的配置

minChunks: 3 

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

圖片資源的壓縮

圖片資源雖然不在編碼過(guò)程中，但它卻是對(duì)頁(yè)面性能影響最大的因素

對(duì)于所有的圖片資源，我們可以進(jìn)行適當(dāng)?shù)膲嚎s

對(duì)頁(yè)面上使用到的icon，可以使用在線字體圖標(biāo)，或者雪碧圖，將眾多小圖標(biāo)合并到同一張圖上，用以減輕http請(qǐng)求壓力。

開(kāi)啟GZip壓縮

拆完包之后，我們?cè)儆?code>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') {// 為生產(chǎn)環(huán)境修改配置...config.mode = 'production'return {plugins: [new CompressionPlugin({test: /.js$|.html$|.css/, //匹配文件名threshold: 10240, //對(duì)超過(guò)10k的數(shù)據(jù)進(jìn)行壓縮deleteOriginalAssets: false //是否刪除原文件})]}}

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

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

使用SSR

SSR（Server side ），也就是服務(wù)端渲染，組件或頁(yè)面通過(guò)服務(wù)器生成html字符串，再發(fā)送到瀏覽器

從頭搭建一個(gè)服務(wù)端渲染是很復(fù)雜的，vue應(yīng)用建議使用Nuxt.js實(shí)現(xiàn)服務(wù)端渲染。

讀到這里，這篇“Vue SPA首屏加載緩慢問(wèn)題如何解決”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。