前端性能優化,如何提高首屏加載速度?
當項目代碼量達到一定級別,我們就會發現我們首次進入項目的時間特別長,其原因就是打包過後的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攻擊體驗一次黑客