當專案程式碼量達到一定級別，我們就會發現我們首次進入專案的時間特別長，其原因就是打包過後的app.js大小過大，載入需要一定的時間。

那我們有什麼方法可以進行效能優化呢？

關於效能優化

在開始之前，我們需要明白一個原則：效能優化的最終目的是提升使用者體驗。\ 簡而言之就是讓使用者感覺這個網站很「快」（至少不慢hh），這裡的「快」有兩種，一種是「真的快」一種是「覺得快」

• 「真的快」：可以客觀衡量的指標，像網頁訪問時間、互動響應時間、跳轉頁面時間
• 「覺得快」：使用者主觀感知的效能，通過視覺引導等手段轉移使用者對等待時間的關注

對症下藥

我們知道是app.js檔案太大，載入時間太長導致了首屏載入速度過慢，我們就需要對症下藥減小app.js的大小，提高網站訪問速度，

一、壓縮：

對程式碼進行壓縮，我們可以減小程式碼的體積量。

二、路由懶載入：

當我們使用路由懶載入後，專案就會進行按需載入，其原理就是利用webpack大法的code splitting，當你使用路由載入的寫法，webpack就會對app.js進行程式碼分割，減小app.js的體積，從而提高首屏載入數點。

沒使用路由懶載入前的app.js：

使用路由懶載入後對app.js進行code splitting：

三、CDN引入：

採用CDN引入，在index.html使用CDN引入，並在webpack配置。打包之後webpack進會從外部打包第三方引入的庫,減小app.js的體積，從而提高首屏載入速度。

沒使用CDN引入前app.js的大小：

使用CDN引入後app.js的大小：

四、SSR伺服器渲染：

有侷限性，禁用了beforeCreate()和created()之外的其他生命週期，我自己沒有嘗試過使用，但這是一種方案。                                                                 

五、增加頻寬：

增加頻寬可以提高資源的訪問速度，從而提高首批的載入速度，我司專案頻寬由2M升級到5M，效果明顯。

六、提取第三方庫 vendor：

這是也是webpack大法的code splitting，提取一些第三方的庫，從而減小app.js的大小。

以上只是一些針對性的方案，web效能優化還有很多，這裡簡單列舉這幾種，希望能夠幫助到大家。

筆者往期好文：

前端技術日新月異，vue3.0的時代已經來臨...

vuex五大核心概念，看完這篇文章就夠了

元件通訊的8種方式，你搞清楚了嗎？