VUE項目性能優化實踐——通過懶加載提升頁面響應速度

2021-01-08 51CTO

最近我司因業務需求,需要在一個內部數據分析平臺集成在線Excel功能,既然我們自己就是做開發工具的,所以目光自然就落在了我司自研的前端表格產品上。

項目的目的是要通過數據透視表和Excel公式來分析公司的各項運營數據。不過在集成後,在開發環境頁面運行流暢,大量數據加載處理也很快。但是發布生產後,在用戶每次打開頁面時,加載時間上相較開發階段均有所降低,經過排查速度變慢是由於發布包的vendor.js變大所導致的,這個文件加載每次都需300毫秒左右,由於小的Vue項目並沒有做模塊劃分,所以所有的代碼都直接打包到了vendor中,在集成了新功能後,發布包也隨之變大了。

既然找到了原因,我們就開始著手優化,在前端對於需加載較大資源時,我們一般都採用懶加載的方式來優化效率。

什麼是懶加載?

懶加載也叫做延時加載,在網頁響應時不立刻請求資源,待頁面加載完畢或者按需響應時再加載資源,以達到提高頁面響應速度以及節省伺服器資源的謎底。網頁中常用的懶加載是圖片的懶加載,對於類似淘寶一樣的多圖頁面,如果等待所有圖片都下載完成再響應用不必然造成頁面加載的卡頓。對於JS資源的加載也是同樣的道理,大JS的加載會造成JS阻塞,頁面出現停止響應的假死狀態。因此可以通過按需加載的方式,提高頁面首屏的加載速度。

總結了具體優化步驟,下面我們就開始著手優化吧!

開始優化

首先是項目環境:Vue 2.6

開發環境:Vue-cli 4.5 + TypeScript 3.9

劃分業務模塊

通過路由異步加載模塊,加速首屏以及其他頁面加載速度,在Vue Router中將webExcel模塊配置為懶加載模式,配置後webExcel組件會按照指定的webpackChunkName打包為單獨的文件,並在訪問webExcel路由的時候才會加載。這樣訪問home以及about頁面時並不會加載webExcel資源。

懶加載路由配置

打包發布訪問頁面,首屏秒開,直接訪問about依舊秒開。可是查看網絡請求時候發現訪問首頁時請求了about和web Excel的資源。經過排查發現vue-cli在頁面中使用了preload和prefetch預加載機制,在不影響當前頁面加載的情況下預加載後續頁面需要的資源提升用戶體驗,這裡為了演示清晰注釋掉prefetch的資源。

(臨時禁用prefetch預加載)

開啟路由懶加載後首頁並未加載about和webExcel。

(首頁Home網絡請求)

清理網絡請求記錄,點擊Web Excel,訪問webExcel頁面,此時會請求webExcel資源並展示組件。

(webExcel頁面網絡請求)

在線Excel組件懶加載,進一步優化使用插件頁面打開速度

優化了路由加載,為了提升用戶體驗,進一步優化webExcel頁面,開啟組件懶加載,當需要Designer組件的時候再加載。

開啟異步組件的方式類似於路由,直接配置import組件即可,替換原有的靜態import。

(組件懶加載)

這裡我們一步到位使用AsyncComponent配置,這樣在加載組件(loading)時候可以給用戶一個提示。

(頁面模板)

(異步組件懶加載)

頁面上通過displayDesigner屬性控制Designer組件是否顯示,setTimeout 3秒後開始加載Designer組件並展示。LoadingComponent在加載時展示loading狀態。

可以從網絡請求中看到,webExcel加載完3秒後開始請求designer資源,請求時顯示LoadingComponent,請求完畢展示Desinger 組件。

開啟gzip壓縮,加速資源請求速度

為了進一步加速資源請求,可以開啟伺服器gizp壓縮,目前大部分瀏覽器都支持gzip,可以開啟伺服器的gzip功能,伺服器在傳輸資源之前先進行壓縮。

網絡請求Request中會出現如下內容,就表示支持gzip

Accept-Encoding: gzip, deflate, br

Vue-cli可以在打包時就將資源提前進行gzip打包,這樣伺服器直接返回打包後的資源不需要再次打包了。通過使用compression-webpack-plugin插件可以在打包時直接生成gz壓縮文件。關於gzip的配置可以根據具體部署情況設置。

總結

經過以上優化,首屏加載資源僅需Vue基礎組件和Home頁面組件,首屏加載速度回復到原始200毫秒。其他未使用Designer組件的頁面也無需加載資源,同時Designer組件加載一次,後續其他頁面再使用組件也無需再次加載

以上就是關於Vue路由和組件懶加載的一些配置,不過懶加載不是萬能的,還是要從實際需求出發決定是否使用。

【編輯推薦】

【責任編輯:

張燕妮

TEL:(010)68476606】

點讚 0

相關焦點

  • Vuex你從沒使用過的優化方案!
    本文轉載自【微信公眾號:前端人,ID:FrontendPeople】經微信公眾號授權轉載,如需轉載與原文作者聯繫在本篇文章我們將重點關注代碼拆分我們的狀態管理 - Vuex模塊的優化在我們進一步了解如何懶加載Vuex模塊之前,您需要注意一件重要的事情。
  • webpack的異步加載原理及分包策略
    路由懶加載為什麼需要懶加載?像 vue 這種單頁面應用,如果沒有路由懶加載,運用 webpack 打包後的文件將會很大,造成進入首頁時,需要加載的內容過多,出現較長時間的白屏,運用路由懶加載則可以將頁面進行劃分,需要的時候才加載頁面,可以有效的分擔首頁所承擔的加載壓力,減少首頁加載用時。
  • Vue+Axios+Vuex+Vux+Vue-Router全家桶搭建前端框架
    FaceBook,社區比較多,而且還可以跨平臺運行,React-Native可以實現一次編寫,安卓、蘋果、web通殺;但是學習也需要一段時間,而且後期維護也不容易;其他的我們就不一一介紹了,最後來看看今天的重頭戲Vue;三、Vue,值得我們驕傲的是,國人發明的,一款漸進式框架,能與現有項目無縫融合,也就是說現有項目可以逐步更新替換使用vue;使用她能讓我們無需過多的分神去處理數據怎麼展示同步
  • 標籤頁管理超好用,加載速度提升 10%
    在 8 月 25 日發布的大版本更新中,Chrome 發布了不少可以提升效率的功能,比如選項卡分類、選項卡預覽、跨平臺傳送……雖然它們看起來與「提升效率」不沾邊,但卻實實在在地節省了使用者的時間。懶人目錄選項卡支持分組,讓人更加專注同時預覽多個選項卡,不再怕誤點加載速度提升 10%,實在地節省了時間二維碼分享,讓設備間聯動更方便PDF 文件的在線填寫及保存內置更高兼容性,老舊瀏覽器不再依靠插件
  • 在vue項目中使用vuex實現狀態管理的案例
    說明:其實如果項目不是很龐大很複雜,沒有涉及到很多狀態值需要被很多頁面或組件共用;或者某個頁面或組件的行為會對其他頁面或組件造成依賴性的影響。並不需要使用vuex。vuex的使用與否在實際開發中應該視項目情況而定。準備工作:a.在vue項目中安裝vuex: npm install vuex -S。b.了解下vuex的五個屬性。
  • 5分鐘帶你入門vuex(vue狀態管理)
    如果你之前使用過vue.js,你一定知道在vue中各個組件之間傳值的痛苦,在vue中我們可以使用vuex來保存我們需要管理的狀態值,值一旦被修改,所有引用該值的地方就會自動更新,那麼接下來我們就來學習一下vuex是如何修改狀態值的:我們新建一個vue項目(這裡由於我們是講解vuex,所以對於vue項目的創建我們不會講解太詳細);在命令行輸入 vue init
  • 如何在vue項目中使用sass並設置元素樣式
    如果直接使用sass,啟動項目會出現報錯。那麼,如何在vue項目中使用sass?下面利用實例說明:1、打開HBuilderX開發工具,新建項目,選擇普通項目;然後輸入項目名稱wmk,選擇vue模板,接著點擊創建按鈕
  • 4種可用於組織大型Vue.js項目的最佳實踐
    但在搜索Vue的局限性時,我發現很多人都提到了它對大型項目缺乏支持這一現象。不過在深入了解之後,我可以自信地說並非如此。因此,本文將討論4種可用於組織大型Vue.js項目的最佳實踐。1.使用Vue Slots使代碼易於理解父子關係是組件之間相互連接的最常用方法之一,但有時這可能並不是最佳選擇。
  • 站內優化:代碼優化和標籤優化對網站的重要性
    (2)、css sprite技術網站上的一些圖片可以採用css sprite技術進行合併,減少加載請求次數,從而提高網頁的加載速度。(3)、CSS代碼優化通過對css代碼屬性的簡寫、移除多餘的結構(frameworks)和重設(resets)等一系列的方法和技巧來簡化css代碼,減小css文件的大小。
  • 開發者必備:測試網站速度的五個免費在線工具
    而網頁載入速度對於一個網站來講至關重要,試想一下,你喜歡進一個需要很長時間才載入完畢的網站嗎?而且,搜尋引擎對網頁載入速度也提出了要求。「The web should be fast。」據悉,網站若沒有在4秒內讀取出來,大多數的訪客就會選擇離開,甚至Google也將網頁載入速度作為網站排名的眾多因素之一,唯有提升網站效能才能讓你的網站訪客更多、更快樂。
  • 什麼是MVVM,MVC和MVVM的區別,MVVM框架VUE實現原理
    C即Controller指的是頁面業務邏輯。使用MVC的目的就是將M和V的代碼分離。『MVC是單向通信。也就是View跟Model,必須通過Controller來承上啟下。比如:angular、react、vue。瀏覽器的兼容性問題已經不再是前端的阻礙。前端的項目越來越大,項目的可維護性和擴展性、安全性等成了主要問題。當年為了解決瀏覽器兼容性問題,出現了很多類庫,其中最典型的就是jquery。但是這類庫沒有實現對業務邏輯的分成,所以維護性和擴展性極差。
  • iOS hybrid App 的實現原理及性能監測
    影響 App 使用體驗一般來講有兩個主要方面第一方面是 UI 的響應速度,UI 的流暢與否給用戶的體驗是非常不一樣的。對這方面的性能監測,一般的做法就是在主要的交互函數裡打上時間戳,而對於系統的 View,也可以採用 Method Swizzle 的方法對所有的系統函數的調用時間進行統計。
  • vue高級進階系列——用typescript玩轉vue和vuex
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫用過vue的朋友大概對vuex也不陌生,vuex的官方解釋是專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。
  • 什麼是VUE?VUE與JS的對比
    我們需要讓所有綁定的對象和元素都能感知到變化1.1.1. vue與js的對比1.1.1.1. js的實現(了解)<!/node_modules/vue/dist/vue.js"></script></head><body><!--2.
  • 統信桌面作業系統V20個人版免費下載 全面優化與升級
    優化了搜索響應速度 優化系統資源利用率 - 應用商店 優化應用商店頁面打開響應速度 - 音樂 新增觸控屏和觸摸板功能支持 優化了啟動和操作響應速度 - 影院 影院新增觸控屏、觸摸板功能 提升影院應用響應性能 - 截圖錄屏 新增截屏錄屏觸控屏
  • vue3.0手機聊天室|Vue3+Vant3仿微信界面
    項目簡介Vue3Chat是基於vue3.x+vuex4+vue-router4全家桶技術和vant3.x構建開發的一款mobile仿微信界面聊天實例。實現了發送圖文消息、圖片|視頻預覽、位置查看、紅包|朋友圈等功能。
  • 供我們選擇的 Vue 組件庫還有很多!
    自己平時做項目拿來把玩可以,但是用於公司生產環境需要三思。總結: 從這幾個比較好的開源項目類型可以看出,ElementUI 多數用於後臺管理系統的頁面開發,業務組件也多用於數據的處理以及表格表單的展示,但是還是那句話沒人維護了,要是用的同學請慎重考慮一下後面要更新的 Vue3.0。
  • vue-element-admin 4.0.0 正式版發布
    重大改變 基於 vue-cli@3進行構建 調整了項目的目錄結構 mock 文件移至根目錄下 layout 從 views 文件夾下移至 src 下 使用了最新的 eslint-plugin-vue
  • Vue全家桶之什麼是Vuex
    VueX狀態自管理應用包含以下幾個部分:state,驅動應用的數據源;view,以聲明方式將 state 映射到視圖;actions,響應在 view 上的用戶輸入導致的狀態變化。我們知道Vue的理念就是單頁面應用和單項數據流: