Vue首屏加載速度優(yōu)化，我用這幾個(gè)技巧提升80%以上

作者：誰動(dòng)了我的橘子

原文鏈接：https://juejin.im/post/5edf5b22e51d4578975a7024

在Vue項(xiàng)目中，引入到工程中的所有js、css文件，編譯時(shí)都會(huì)被打包進(jìn)vendor.js，瀏覽器在加載該文件之后才能開始顯示首屏。若是引入的庫(kù)眾多，那么vendor.js文件體積將會(huì)相當(dāng)?shù)拇?，影響首屏的體驗(yàn)?？梢钥磦€(gè)例子：

這是優(yōu)化前的頁面加載狀態(tài)：執(zhí)行npm run build打包項(xiàng)目，出來的vendeor.js文件，基本都是1M以上的的巨大文件，沒有用戶能忍受5s以上的loading而不關(guān)閉頁面的，如圖所示：

當(dāng)項(xiàng)目在掛載到服務(wù)器上，平均都是10S以上加載出來，好家伙這加載時(shí)間，仿佛過了半個(gè)世紀(jì)，很煩人，心態(tài)boom, 開發(fā)者甚至都有種想砸電腦的沖動(dòng)（·#*@#￥……&*）！

一、我們先來分析下前端加載速度慢原因

1. 首先安裝webpack的可視化資源分析工具，命令行執(zhí)行：

npm i webpack-bundle-analyzer -D

2. 然后在webpack的dev開發(fā)模式配置中，引入插件，代碼如下：

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

plugins: [
    new BundleAnalyzerPlugin()
]

3. 最后命令行執(zhí)行npm run build --report?, 瀏覽器會(huì)自動(dòng)打開分析結(jié)果，如下所示：

可以看到vue全家桶相關(guān)依賴占用了很大的空間，對(duì)webpack的構(gòu)建速度和網(wǎng)站加載速度都會(huì)有比較大的影響。單頁應(yīng)用會(huì)隨著項(xiàng)目越大，導(dǎo)致首屏加載速度很慢，針對(duì)目前所暴露出來的問題，有以下幾種優(yōu)化方案可以參考：

二、有針對(duì)性的優(yōu)化方案

1. 對(duì)于第三方j(luò)s庫(kù)的優(yōu)化，分離打包

生產(chǎn)環(huán)境是內(nèi)網(wǎng)的話，就把資源放內(nèi)網(wǎng)，通過靜態(tài)文件引入，會(huì)比node_modules和外網(wǎng)CDN的打包加載快很多。如果有外網(wǎng)的話，可以通過CDN方式引入，因?yàn)椴挥谜加迷L問外網(wǎng)的帶寬，不僅可以為您節(jié)省流量，還能通過CDN加速，獲得更快的訪問速度。但是要注意下，如果你引用的CDN 資源存在于第三方服務(wù)器，在安全性上并不完全可控。

目前采用引入依賴包生產(chǎn)環(huán)境的js文件方式加載，直接通過window可以訪問暴露出的全局變量，不必通過import引入，Vue.use去注冊(cè)

在webpack的dev開發(fā)配置文件中, 加入如下參數(shù)，可以分離打包第三方資源包，key為依賴包名稱，value是源碼拋出來的全局變量。如下圖所示，可以看到打包后vue相關(guān)資源包已經(jīng)排除在外了。對(duì)于一些其他的工具庫(kù)，盡量采用按需引入的方式。

externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    axios: 'axios',
    'element-ui': 'ELEMENT'
}

2. vue-router 使用懶加載

在訪問到當(dāng)前頁面才會(huì)加載相關(guān)的資源，異步方式分模塊加載文件，默認(rèn)的文件名是隨機(jī)的id。如果在output中配置了chunkFilename，可以在component中添加WebpackChunkName，是為了方便調(diào)試，在頁面加載時(shí)候，會(huì)顯示加載的對(duì)應(yīng)文件名+hash值，如下圖：

{
    path: '/Login',
    name: 'Login',
    component: () = >import( /* webpackChunkName: "Login" */  '@/view/Login')
}

3. 圖片資源的壓縮，icon資源使用雪碧

嚴(yán)格說來這一步不算在編碼技術(shù)范圍內(nèi)，但是卻對(duì)頁面的加載速度影響很大。對(duì)于所有的圖片文件，都可以在一個(gè)叫tinypng的網(wǎng)站上去壓縮一下。網(wǎng)址：tinypng.com/，對(duì)頁面上使用到的icon，可以使用在線字體圖標(biāo)，或者雪碧圖，將眾多小圖標(biāo)合并到同一張圖上，用以減輕http請(qǐng)求壓力。然后通過操作CSS的background屬性，控制背景的位置以及大小，來展示需要的部分。

4. 開啟gizp壓縮

gizp壓縮是一種http請(qǐng)求優(yōu)化方式，通過減少文件體積來提高加載速度。html、js、css文件甚至json數(shù)據(jù)都可以用它壓縮，可以減小60%以上的體積。前端配置gzip壓縮，并且服務(wù)端使用nginx開啟gzip，用來減小網(wǎng)絡(luò)傳輸?shù)牧髁看笮　?/p>

命令行執(zhí)行：npm i compression-webpack-plugin -D

在webpack的dev開發(fā)配置文件中加入如下代碼:

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

plugins: [
   new CompressionWebpackPlugin()
]

啟用gzip壓縮打包之后，會(huì)變成下面這樣，自動(dòng)生成gz包。目前大部分主流瀏覽器客戶端都是支持gzip的，就算小部分非主流瀏覽器不支持也不用擔(dān)心，不支持gzip格式文件的會(huì)默認(rèn)訪問源文件的，所以不要配置清除源文件。

配置好之后，打開瀏覽器訪問線上，F(xiàn)12查看控制臺(tái)，如果該文件資源的響應(yīng)頭里顯示有Content-Encoding: gzip，表示瀏覽器支持并且啟用了Gzip壓縮的資源

5. webpack相關(guān)配置優(yōu)化

1. 使用uglifyjs-webpack-plugin插件代替webpack自帶UglifyJsPlugin插件來壓縮JS文件；生產(chǎn)環(huán)境關(guān)閉源碼映射，一方面能減少代碼包的大小，另一方面也有利于系統(tǒng)代碼安全；清除打印日志和debugger信息；配置SplitChunks 抽取公有代碼，提升你的應(yīng)用的性能
2. 使用mini-xss-extract-plugin提取CSS 到單獨(dú)的文件, 并使用optimize-css-assets-webpack-plugin來壓縮CSS文件 。

注：具體相關(guān)webpack配置請(qǐng)點(diǎn)擊juejin.im/post/5d2070…查看第一篇webpack文章，注釋很詳細(xì)喲。

6. 前端頁面代碼層面的優(yōu)化

1. 合理使用v-if和v-show
2. 合理使用watch和computed
3. 使用v-for必須添加key, 最好為唯一id, 避免使用index, 且在同一個(gè)標(biāo)簽上，v-for不要和v-if同時(shí)使用
4. 定時(shí)器的銷毀?？梢栽赽eforeDestroy()生命周期內(nèi)執(zhí)行銷毀事件；也可以使用$once這個(gè)事件偵聽器，在定義定時(shí)器事件的位置來清除定時(shí)器。詳細(xì)見vue官網(wǎng)

最終優(yōu)化后的效果如下圖：vendor.js文件從1M以上優(yōu)化到256K左右，體積減少接近80%，排除服務(wù)器影響的因素，界面渲染速度基本都在1s左右，達(dá)到秒開效果，比之前快了太多，體驗(yàn)一下就上來了嘻嘻。