在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的構建速度和網站載入速度都會有比較大的影響。單頁應用會隨著專案越大，導致首屏載入速度很慢，針對目前所暴露出來的問題，有以下幾種優化方案可以參考：

有針對性的優化方案

一、對於第三方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'

二、vue-router使用懶載入

在訪問到當前頁面才會載入相關的資源，非同步方式分模組載入檔案，預設的檔名是隨機的id。如果在output中配置了chunkFilename，可以在component中新增WebpackChunkName，是為了方便除錯，在頁面載入時候，會顯示載入的對應檔名+hash值，如下圖：

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

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

嚴格說來這一步不算在編碼技術範圍內，但是卻對頁面的載入速度影響很大。對於所有的圖片檔案，都可以在一個叫tinypng的網站上去壓縮一下。網址：tinypng.com/，對頁面上使用到的icon，可以使用線上字型圖示，或者雪碧圖，將眾多小圖示合併到同一張圖上，用以減輕http請求壓力。然後通過操作CSS的background屬性，控制背景的位置以及大小，來展示需要的部分。

四、開啟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壓縮的資源

五、webpack相關配置優化

（1）使用uglifyjs-webpack-plugin外掛代替webpack自帶UglifyJsPlugin外掛來壓縮JS檔案；生產環境關閉原始碼對映，一方面能減少程式碼包的大小，另一方面也有利於系統程式碼安全；清除列印日誌和debugger資訊；配置SplitChunks 抽取公有程式碼，提升你的應用的效能

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

六、前端頁面程式碼層面的優化

（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左右，達到秒開效果，比之前快了太多，體驗一下就上來了嘻嘻。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。