基於vue的web前端性能優化

1. 問題引入

使用vue開發項目，部署後發現web端性能較差，存在內存大量佔用。特分析此項目，優化基於vue的web端性能，以提高用戶體驗。

2. 問題分析

2.1 經過查看部署的平臺，發現如下幾大現象

一、  首次進入平臺，加載緩慢，大概5s空白頁；

二、  切換模塊時，單個模塊加載緩慢；

三、  模塊切換屢次後，內存大量佔用，致使頁面卡頓或無響應(ie下)；

 

圖1 首次加載

圖2 屢次切換

 

四、  調用OCX控件的頁面在屢次切換後，內存沒法釋放，比其餘模塊響應時間更長；

五、  經過抓包發現，菜單切換屢次後，單個接口請求數量會累加；

六、  經過查看代碼，發現有沒必要要的jq引入，並進行沒必要要的dom操做；

七、  經過查看代碼，發現echarts並未按需引入；

八、  單個vue文件過大，並未作組件提取、頁面拆分和公共方法提取，大量冗餘代碼；

2.2 問題分析

一、  首屏加載慢

打包構建應用時，Javascript 包會變得很是大，影響頁面加載。若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件，這樣就更加高效了。

二、  切換模塊時，單模塊加載緩慢

l  單個模塊在初始化時調用大量接口，如：須要tab切換才顯示的樹、列表等均在首次加載時調用接口，http鏈接數併發過多，致使加載緩慢。

l  單個模塊大量接口返回有效數據極少，如平臺名稱、端口號等均由不一樣的接口返回，暫用了http鏈接，如果合併這部分接口，也可提升響應速度。

三、  模塊切換屢次後，內存大量佔用

打包構建應用時，未對路由懶加載，全部模塊均打包在一個文件中，Javascript 包會變得很是大，影響頁面加載。

四、  調用OCX控件的頁面在屢次切換後，內存沒法釋放

Vue-router中切換單入口模塊，因爲並未真正切換頁面，調用的OCX控件在每次的實例化中均佔用內存，致使內存未釋放。如果能夠在OCX控件模塊單獨配置入口，切換過程當中可自動釋放內存。

五、  菜單切換屢次後，單個接口請求數量會累加

組件之間傳遞數據方式錯誤，且在數據掛載的時候生成實例，致使事件被重複綁定觸發，產生大量併發請求。各瀏覽器對併發的http鏈接數量有限制，超過數量在ie下http鏈接會掛起，chrome下也會致使響應緩慢、卡頓。

六、  沒必要要的jq引入和沒必要要的dom操做

經過查看代碼，發現項目中引入了jq，僅用於菜單切換時，操做菜單DOM，進行addClass和removeClass操做。在基於vue的項目中須要實現這樣的效果，可直接經過數據驅動，添加三元運算便可。Jq的引入和dom操做沒有必要。

七、  echarts並未按需引入

項目中僅使用地圖（map）、柱狀圖（bar）和折線圖（line），在生產環境引入完整echarts會增長該http請求體積，如果按需引入須要使用的組件，可優化該http鏈接，減小響應時間。

八、  單個vue文件過大，並未作組件提取、頁面拆分和公共方法提取，大量冗餘代碼

經過代碼走查，發現項目中未作共用組件規劃、提取。如：tab切換搜索條件，僅改變搜索條件中的一個類型，卻在項目中重複初始化其中的下拉樹等。單個vue文件可達四千行，大量冗餘代碼，維護異常困難。

3. 問題總結

經過問題分析，主要有如下方向須要優化：

一、  Vue-router優化

二、  http鏈接優化

三、  vue- components優化

四、  代碼優化

五、  打包優化

4. 如何優化

4.1 Vue-router優化

4.1.1 路由懶加載

當打包構建應用時，Javascript 包會變得很是大，影響頁面加載。若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件，這樣就更加高效了。結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕鬆實現路由組件的懶加載，也可將組件按組分塊。

• 使用const Foo = () => import('./Foo.vue')代替import './Foo.vue'；
• 詳見vue-router官網——路由懶加載https://router.vuejs.org/zh-cn/advanced/lazy-loading.html；

4.2 http鏈接優化

HTTP協議定義Web客戶端如何從服務器請求web頁面，以及服務器如何把web頁面傳送給客戶端，瀏覽器請求獲取數據經過http鏈接完成，所以，優化http鏈接優化是web項目優化的重要方向之一。Web項目的由瀏覽器呈現，下面咱們來看看瀏覽器對請求的處理過程，如圖3：

 

圖3 瀏覽器請求處理流程圖

 

4.2.1 減小HTTP請求

• 合併CSS、js、圖片。將css、js、圖片合併，能夠有效減小http請求數；
• 合理規劃API，將可合併的接口請求合併。瀏覽器對併發的http請求數量有限制，即便API響應很快，在多個接口併發請求時，仍會在瀏覽器中形成不一樣程度的卡頓（如ie中部分請求掛起，內存佔用變大等）；

4.2.2 合理使用緩存

合理設置HTTP緩存。從圖1 瀏覽器請求處理流程圖中能夠看出，恰當的緩存設置能夠大大減小HTTP請求，節省帶寬。如不多變化的資源（html、css、js、圖片等）經過 HTTP Header中的cache-control和Expires可設定瀏覽器緩存，變化不頻繁又可能變的資源使用Last-Modifed來作請求驗證。

4.2.3 使用字體圖標

建議使用字體圖標代替純色或漸變色的圖標，如使用icomoon。在準備好svg文件後，可經過https://icomoon.io/在線製做字體圖標，須要維護時可導入json文件從新編輯。

使用字體圖標的優勢：

• 輕量：一個圖標字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小。一旦圖標字體加載了，圖標就會立刻渲染出來，不須要下載一個圖像。能夠減小HTTP請求，還能夠配合HTML5離線存儲作性能優化；
• 靈活性：圖標字體能夠用過font-size屬性設置其任何大小，還能夠加各類文字效果，包括顏色、Hover狀態、透明度、陰影和翻轉等效果。能夠在任何背景下顯示。使用位圖的話，必須得爲每一個不一樣大小和不一樣效果的圖像輸出一個不一樣文件。
• 兼容性：網頁字體支持全部現代瀏覽器，包括IE低版本。

4.2.4 圖片懶加載

在實際的項目開發中，咱們一般會碰見這樣的場景：一個頁面有不少圖片，而首屏出現的圖片大概就一兩張，那麼咱們還要一次性把全部圖片都加載出來嗎？顯然這是愚蠢的，不只影響頁面渲染速度，還浪費帶寬。這也就是們一般所說的首屏加載，技術上現實其中要用的技術就是圖片懶加載--到可視區域再加載。

4.3 組件優化

現大部分業務或管理系統中，模塊較多、單模塊功能較多的狀況時有發生，如果組件沒有劃分好，會致使頁面加載緩慢，影響用戶體驗和使用。針對此狀況，可將模塊內按照佈局或功能從新劃分vue組件：

• 按模塊劃分路由。按照業務模塊劃分路由及子路由，保證模塊間的隔離；
• 模塊內按佈局或功能劃分組件。單個模塊功能較多或邏輯較複雜時，按照佈局劃分爲左右或上下及其組合模式劃分組件，以子組件的方式放在模塊中，方便打包優化、複用、功能拓展及維護；
• 能複用的組件儘可能複用。佈局、功能模塊等都可複用，如：tab中的篩選條件、詳情彈窗、表單等。

4.4 代碼優化

4.4.1 第三方引入優化

• 去除沒必要要的引入，如jq；
• 按需引入echarts包；

4.4.2 基礎優化

• Vue官網中的規範須要遵循，在此再也不贅述https://cn.vuejs.org/v2/guide/；
• v-if，v-show的選擇。權限相關使用v-if、頻繁切換使用v-show、不頻繁切換使用v-if；
• style中使用<style scoped>避免衝突；
• 全局style儘可能抽象，提升複用率，減少css文件大小，節省帶寬；
• 提取共用的方法，放在util.js中，例如表單校驗的封裝；

4.5 打包優化

若打包出的vender.js和app.js較大，在瀏覽器調試窗口可看到這兩個文件加載和解析時間須要幾秒鐘。App.js可經過組件懶加載解決，vender包該如何解決？

解決方案：打包wender時不打包vue、vuex、vue-router、axios等，換爲直接引入（須要在webpack中配置不須要打包的庫）。

 

5. 總結

Web項目中關於性能的優化有不少的開發細節須要注意，如js、css、vue等開發規範均需注意。以上爲我對web項目（vue項目）性能優化的思考，那麼，在項目進行的各個階段，如何避免性能差的問題？如何找到影響項目性能的緣由呢？

5.1 項目構建前

• 根據交互稿或視覺稿，合理劃分pages，通常按照模塊和子模塊劃分；
• 使用路由懶加載，實現模塊化與按需加載的效果，優化首屏性能；
• 提取公共組件，儘可能與業務隔離，如篩選條件等；
• 提取公共方法，放在util.js中，如表單校驗封裝；
• 提取在項目中出現較多的功能模塊，如彈窗詳情等；
• 與後臺開發人員定義接口協議，模塊中能合併的儘可能合併。

5.2 項目構建中和完成後

• 開啓eslint驗證，看到錯誤和警告信息及時解決；
• 打開瀏覽器調試窗口，查看Network中從發起網頁頁面請求Request後分析HTTP請求後獲得的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），能夠根據這個進行網絡性能優化。如查看哪些http請求返回資源很是大或耗用時間較長，可針對處理；
• 打開瀏覽器調試窗口，在Timeline中記錄並分析在網站的生命週期內所發生的各種事件，以此能夠提升網頁的運行時間的性能；
• 代碼編寫過程當中不斷思考是否可優化模塊或作共性組件提取；
• 及時代碼審覈，提升代碼質量；