當項目代碼量達到一定級別，我們就會發現我們首次進入項目的時間特別長，其原因就是打包過後的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種方式，你搞清楚了嗎？