Vue首屏加載速度優化，提高80%以上

       在Vue項目中，引入到工程中的全部js、css文件，編譯時都會被打包進vendor.js，瀏覽器在加載該文件以後才能開始顯示首屏。如果引入的庫衆多，那麼vendor.js文件體積將會至關的大，影響首屏的體驗。能夠看個例子：

       這是優化前的頁面加載狀態：執行npm run build打包項目，出來的vendeor.js文件，基本都是1M以上的的巨大文件，沒有用戶能忍受5s以上的loading而不關閉頁面的，如圖所示：

       當項目在掛載到服務器上，平均都是10S以上加載出來，好傢伙這加載時間，彷彿過了半個世紀，很煩人，心態boom, 開發者甚至都有種想砸電腦的衝動（·#*@#￥……&*）！

咱們先來分析下前端加載速度慢緣由

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

npm i webpack-bundle-analyzer -D複製代碼

2. 而後在webpack的dev開發模式配置中，引入插件，代碼以下：

const BundleAnalyzerPlugin = require('webpack-bundle-plugin').BundleAnalyzerPlugin

plugins: [
    new BundleAnalyzerPlugin()
]複製代碼

3. 最後命令行執行npm run build --report , 瀏覽器會自動打開分析結果，以下所示：

       能夠看到vue全家桶相關依賴佔用了很大的空間，對webpack的構建速度和網站加載速度都會有比較大的影響。單頁應用會隨着項目越大，致使首屏加載速度很慢，針對目前所暴露出來的問題，有如下幾種優化方案能夠參考：

有針對性的優化方案

1、對於第三方js庫的優化，分離打包

       生產環境是內網的話，就把資源放內網，經過靜態文件引入，會比node_modules和外網CDN的打包加載快不少。若是有外網的話，能夠經過CDN方式引入，由於不用佔用訪問外網的帶寬，不只能夠爲您節省流量，還能經過CDN加速，得到更快的訪問速度。可是要注意下，若是你引用的CDN 資源存在於第三方服務器，在安全性上並不徹底可控。

        目前採用引入依賴包生產環境的js文件方式加載，直接經過window能夠訪問暴露出的全局變量，沒必要經過import引入，Vue.use去註冊

        在webpack的dev開發配置文件中, 加入以下參數，能夠分離打包第三方資源包，key爲依賴包名稱，value是源碼拋出來的全局變量。以下圖所示，能夠看到打包後vue相關資源包已經排除在外了。對於一些其餘的工具庫，儘可能採用按需引入的方式。

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

2、vue-router 使用懶加載

       在訪問到當前頁面纔會加載相關的資源，異步方式分模塊加載文件，默認的文件名是隨機的id。若是在output中配置了chunkFilename，能夠在component中添加WebpackChunkName，是爲了方便調試，在頁面加載時候，會顯示加載的對應文件名+hash值，以下圖：

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

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

     嚴格說來這一步不算在編碼技術範圍內，可是卻對頁面的加載速度影響很大。對於全部的圖片文件，均可以在一個叫tinypng的網站上去壓縮一下。網址： tinypng.com/，對頁面上使用到的icon，可使用在線字體圖標，或者雪碧圖，將衆多小圖標合併到同一張圖上，用以減輕http請求壓力。而後經過操做CSS的background屬性，控制背景的位置以及大小，來展現須要的部分。

4、開啓gizp壓縮

       gizp壓縮是一種http請求優化方式，經過減小文件體積來提升加載速度。html、js、css文件甚至json數據均可以用它壓縮，能夠減少60%以上的體積。前端配置gzip壓縮，而且服務端使用nginx開啓gzip，用來減少網絡傳輸的流量大小。

命令行執行：npm i compression-webpack-plugin -D

在webpack的dev開發配置文件中加入以下代碼:

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

plugins: [
   new CompressionWebpackPlugin()
]複製代碼

      啓用gzip壓縮打包以後，會變成下面這樣，自動生成gz包。目前大部分主流瀏覽器客戶端都是支持gzip的，就算小部分非主流瀏覽器不支持也不用擔憂，不支持gzip格式文件的會默認訪問源文件的，因此不要配置清除源文件。

       配置好以後，打開瀏覽器訪問線上，F12查看控制檯，若是該文件資源的響應頭裏顯示有Content-Encoding: gzip，表示瀏覽器支持而且啓用了Gzip壓縮的資源

5、webpack相關配置優化

（1）使用uglifyjs-webpack-plugin插件代替webpack自帶UglifyJsPlugin插件來壓縮JS文件；生產環境關閉源碼映射，一方面能減小代碼包的大小，另外一方面也有利於系統代碼安全；清除打印日誌和debugger信息；配置SplitChunks 抽取公有代碼，提高你的應用的性能

（2）使用mini-xss-extract-plugin提取CSS 到單獨的文件, 並使用optimize-css-assets-webpack-plugin來壓縮CSS文件 。

注：具體相關webpack配置請點擊 juejin.im/post/5d2070…查看第一篇webpack文章，註釋很詳細喲。

6、前端頁面代碼層面的優化

（1）合理使用v-if和v-show

（2）合理使用watch和computed

（3）使用v-for必須添加key, 最好爲惟一id, 避免使用index, 且在同一個標籤上，v-for不要和v-if同時使用

（4）定時器的銷燬。能夠在beforeDestroy()生命週期內執行銷燬事件；也可使用$once這個事件偵聽器，在定義定時器事件的位置來清除定時器。詳細見vue官網

      最終優化後的效果以下圖：vendor.js文件從1M以上優化到256K左右，體積減小接近80%， 排除服務器影響的因素，界面渲染速度基本都在 1s左右，達到秒開效果， 比以前快

了太 多， 體驗一下就上來了嘻嘻。

       結語：前端性能優化相當重要，之後有遇到更好的其餘方案會繼續補充進來。你也能夠在評論區留言探討，有錯誤不足的地方歡迎大佬指出。