首屏加載

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

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

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

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

通過DOMContentLoad或者performance來計(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,
}; 

加載慢的原因

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

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

解決方案

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

• 減小入口文件積
• 靜態(tài)資源本地緩存
• UI框架按需加載
• 圖片資源的壓縮
• 組件重復(fù)打包
• 開啟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)資源本地緩存

后端返回資源問題：

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

前端合理利用localStorage

UI框架按需加載

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

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

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

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

組件重復(fù)打包

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

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

minChunks: 3 

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

圖片資源的壓縮

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

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

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

開啟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ì)超過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ù)端渲染，組件或頁面通過服務(wù)器生成html字符串，再發(fā)送到瀏覽器

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

到此這篇關(guān)于Vue SPA首屏加載緩慢問題解決方案的文章就介紹到這了,更多相關(guān)Vue SPA首屏加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論