前端效能優化,如何提高首屏載入速度?
當專案程式碼量達到一定級別,我們就會發現我們首次進入專案的時間特別長,其原因就是打包過後的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效能優化還有很多,這裡簡單列舉這幾種,希望能夠幫助到大家。
筆者往期好文:
- 東東吖帶你打通全棧,go-vue-react專案介紹
- 【vue進階之旅】如何自定義元件v-model,封裝屬於自己的元件庫?
- 【vue進階之旅】如何使用keep-alive做元件快取?
- 發生跨域的時候,伺服器到底有沒有接收到請求?
- vue進階之路:vue3.2-setup語法糖、組合式API、狀態庫Pinia歸納總結
- 跨域問題及前後端常見解決方案?
- 微信小程式如何分包?
- 前端效能優化,如何提高首屏載入速度?
- 專案中的配置檔案都是幹嘛的?
- 從0到1學習Node.js系列教程(第一篇):API介面初體驗
- 父子元件的生命週期執行流程是怎麼樣的呢?
- 1024程式設計師這天,我發現了掘金官方的一個bug。
- 元件通訊的8種方式,你搞清楚了嗎?
- 手把手教你利用XSS攻擊體驗一次黑客