碼上快樂

相關內容    簡體    繁體

vuejs項目性能優化總結

本文轉載自   查看原文   2018-11-30 17:19   644 

在使用elementUI構建公司管理系統時，發現首屏加載時間長，加載的網絡資源比較多，對系統的體驗性會差一點，而且用webpack打包的vuejs的vendor包會比較大。所以通過搜集網上所有對於vuejs項目的性能優化，做了有關3方面的優化建議，主要包括：上線代碼包打包、源碼編寫優化、用戶體驗優化。(下面的優化建議只在vue-cli腳手架下做過測試，詳情請參考)

1.代碼包優化

  • 屏蔽sourceMap
    • 待下項目開發完成。進行打包源碼上線環節，需要對項目開發環節的開發提示信息以及錯誤信息進行屏蔽，一方面可以減少上線代碼包的大小；另一方面提高系統的安全性。在vuejs項目的config目錄下有三個文件dev.env.js(開發環境配置文件)、prod.env.js(上線配置文件)、index.js(通用配置文件)。vue-cli腳手架在上線配置文件會自動設置允許sourceMap打包，所以在上線前可以屏蔽sourceMap。如下所示，index.js的配置如下,通用配置文件分別對開發環境和上線環境做了打包配置分類，在build對象中的配置信息中，productionSourceMap修改成false:
  1. 'use strict'
  2. // Template version: 1.3.1
  3. // see http://vuejs-templates.github.io/webpack for documentation.
  4.  
  5. const path = require('path')
  6.  
  7. module.exports = {
  8. dev: {
  9.  
  10. // Paths
  11. assetsSubDirectory: 'static',
  12. assetsPublicPath: '/',
  13. proxyTable: {},
  14.  
  15. // Various Dev Server settings
  16. host: 'localhost', // can be overwritten by process.env.HOST
  17. port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
  18. autoOpenBrowser: false,
  19. errorOverlay: true,
  20. notifyOnErrors: true,
  21. poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
  22.  
  23.  
  24. /**
  25. * Source Maps
  26. */
  27.  
  28. // https://webpack.js.org/configuration/devtool/#development
  29. devtool: 'cheap-module-eval-source-map',
  30.  
  31. // If you have problems debugging vue-files in devtools,
  32. // set this to false - it *may* help
  33. // https://vue-loader.vuejs.org/en/options.html#cachebusting
  34. cacheBusting: true,
  35.  
  36. cssSourceMap: true
  37. },
  38.  
  39. build: {
  40. // Template for index.html
  41. index: path.resolve(__dirname, '../dist/ndindex.html'),
  42.  
  43. // Paths
  44. assetsRoot: path.resolve(__dirname, '../dist'),
  45. assetsSubDirectory: 'static',
  46. assetsPublicPath: './',
  47.  
  48. /**
  49. * Source Maps
  50. */
  51.  
  52. productionSourceMap: false,
  53. // https://webpack.js.org/configuration/devtool/#production
  54. devtool: '#source-map',
  55.  
  56. // Gzip off by default as many popular static hosts such as
  57. // Surge or Netlify already gzip all static assets for you.
  58. // Before setting to `true`, make sure to:
  59. // npm install --save-dev compression-webpack-plugin
  60. productionGzip: true,
  61. productionGzipExtensions: ['js', 'css','svg'],
  62.  
  63. // Run the build command with an extra argument to
  64. // View the bundle analyzer report after build finishes:
  65. // `npm run build --report`
  66. // Set to `true` or `false` to always turn it on or off
  67. bundleAnalyzerReport: process.env.npm_config_report
  68. }
  69. }
  • 對項目代碼中的JS/CSS/SVG(*.ico)文件進行gzip壓縮
    • 在vue-cli腳手架的配置信息中，有對代碼進行壓縮的配置項，例如index.js的通用配置，productionGzip設置為true，但是首先需要對compress-webpack-plugin支持，所以需要通過 npm install --save-dev compression-webpack-plugin(如果npm install出錯了，就使用cnpm install安裝。可能網絡比較差npm install會出現頻率比較大)，gzip會對js、css文件進行壓縮處理；對於圖片進行壓縮問題，對於png，jpg，jpeg沒有壓縮效果，對於svg，ico文件以及bmp文件壓縮效果達到50%，在productionGzipExtensions: ['js', 'css','svg']設置需要進行壓縮的什么格式的文件。對項目文件進行壓縮之后，需要瀏覽器客戶端支持gzip以及后端支持gzip。下面可以查看成功支持gzip狀態：
  1. 'use strict'
  2. // Template version: 1.3.1
  3. // see http://vuejs-templates.github.io/webpack for documentation.
  4. const path = require('path')
  5. module.exports = {
  6. build: {
  7. // Template for index.html
  8. index: path.resolve(__dirname, '../dist/ndindex.html'),
  9.  
  10. // Paths
  11. assetsRoot: path.resolve(__dirname, '../dist'),
  12. assetsSubDirectory: 'static',
  13. assetsPublicPath: './',
  14.  
  15. /**
  16. * Source Maps
  17. */
  18.  
  19. productionSourceMap: false,
  20. // https://webpack.js.org/configuration/devtool/#production
  21. devtool: '#source-map',
  22.  
  23. // Gzip off by default as many popular static hosts such as
  24. // Surge or Netlify already gzip all static assets for you.
  25. // Before setting to `true`, make sure to:
  26. // npm install --save-dev compression-webpack-plugin
  27. productionGzip: true,
  28. productionGzipExtensions: ['js', 'css','svg'],
  29.  
  30. // Run the build command with an extra argument to
  31. // View the bundle analyzer report after build finishes:
  32. // `npm run build --report`
  33. // Set to `true` or `false` to always turn it on or off
  34. bundleAnalyzerReport: process.env.npm_config_report
  35. }
  36. }

  •  

    ResponseHeader- content-encoding:"gzip"

  • 對路由組件進行懶加載
    • 在路由配置文件里，這里是router.js里面引用組件。如果使用同步的方式加載組件，在首屏加載時會對網絡資源加載加載比較多，資源比較大，加載速度比較慢。所以設置路由懶加載，按需加載會加速首屏渲染。在沒有對路由進行懶加載時，在Chrome里devtool查閱可以看到首屏網絡資源加載情況（6requests 3.8MB transfferred Finish:4.67s DOMContentLoaded 2.61s Load 2.70s）。在對路由進行懶加載之后（7requests 800kb transffered Finish2.67s DOMContentLoaded 1.72s Load 800ms）,可以看見加載速度明顯加快。但是進行懶加載之后，實現按需加載，那么項目打包不會把所有js打包進app.[hash].js里面，優點是可以減少app.[hash].js體積，缺點就是會把其它js分開打包，造成多個js文件，會有多次https請求。如果項目比較大，需要注意懶加載的效果。
    1. // 實現懶加載方式
    2. import Vue from "vue";
    3. import Router from "vue-router";
    4. Vue.use(Router);
    5. export default new Router({
    6. mode: "history",
    7. base: "/facex/district/",
    8. routes: [
    9. { path: "/", redirect: "index" },
    10. {
    11. path: "/",
    12. name: "home",
    13. component: resolve=>require(["@/views/home"],resolve),
    14. children: [
    15. {
    16. // 員工查詢
    17. path: "/employees",
    18. component: resolve=>require(["@/components/employees"],resolve)
    19. },
    20. {
    21. // 首頁
    22. path: "/index",
    23. component: resolve=>require(["@/views/index"],resolve)
    24. },
    25. {
    26. // 訪客查詢
    27. path: "/visitorlist",
    28. component: resolve=>require(["@/components/visitorlist"],resolve)
    29. },
    30. {
    31. path: "/department",
    32. component: resolve=>require(["@/views/department"],resolve)
    33. },
    34. //識別查詢
    35. {
    36. path: "/discriminate",
    37. component: resolve=>require(["@/components/discriminate"],resolve)
    38. },
    39. {
    40. path: "/addDevice",
    41. component: resolve=>require(["@/views/addDevice"],resolve)
    42. },
    43. {
    44. path: "/districtNotice",
    45. component: resolve=>require(["@/components/districtNotice"],resolve)
    46. }
    47. ]
    48. },
    49. {
    50. path: "/noticeList",
    51. name: "noticeList",
    52. component: resolve=>require(["@/views/noticeList"],resolve)
    53. },
    54. {
    55. path: "/login",
    56. name: "login",
    57. component: resolve=>require(["@/views/login"],resolve)
    58. },
    59. {
    60. path: "/register",
    61. name: "register",
    62. component: resolve=>require(["@/views/register"],resolve)
    63. },
    64. {
    65. path: "/setaccount",
    66. name: "setaccount",
    67. component:resolve=>require(["@/views/setaccount"],resolve)
    68. },
    69. {
    70. path: "/addGroup",
    71. name: "addGroup",
    72. component:resolve=>require(["@/views/addGroup"],resolve)
    73. },
    74. {
    75. path: "/guide",
    76. name: "guide",
    77. component:resolve=>require(["@/components/guide"],resolve)
    78. },
    79. {
    80. path: "/addNotice",
    81. name: "addNotice",
    82. component: resolve=>require(["@/views/addNotice"],resolve)
    83. }
    84. ]
    85. });i

2.源碼優化

  • v-if 和 v-show選擇調用
    • v-show和v-if的區別是：v-if是懶加載，當狀態為true時才會加載，並且為false時不會占用布局空間；v-show是無論狀態是true或者是false，都會進行渲染，並對布局占據空間對於在項目中，需要頻繁調用，不需要權限的顯示隱藏，可以選擇使用v-show，可以減少系統的切換開銷。
  • 為item設置唯一key值，
    • 在列表數據進行遍歷渲染時，需要為每一項item設置唯一key值，方便vuejs內部機制精准找到該條列表數據。當state更新時，新的狀態值和舊的狀態值對比，較快地定位到diff。
  • 細分vuejs組件
    • 在項目開發過程之中，第一版本把所有的組件的布局寫在一個組件中，當數據變更時，由於組件代碼比較龐大，vuejs的數據驅動視圖更新比較慢，造成渲染比較慢。造成比較差的體驗效果。所以把組件細分，比如一個組件，可以把整個組件細分成輪播組件、列表組件、分頁組件等。
  • 減少watch的數據
    • 當組件某個數據變更后需要對應的state進行變更，就需要對另外的組件進行state進行變更。可以使用watch監聽相應的數據變更並綁定事件。當watch的數據比較小，性能消耗不明顯。當數據變大，系統會出現卡頓，所以減少watch的數據。其它不同的組件的state雙向綁定，可以采用事件中央總線或者vuex進行數據的變更操作。
  • 內容類系統的圖片資源按需加載
    • 對於內容類系統的圖片按需加載，如果出現圖片加載比較多，可以先使用v-lazy之類的懶加載庫或者綁定鼠標的scroll事件，滾動到可視區域先再對數據進行加載顯示，減少系統加載的數據。
  • SSR(服務端渲染)
    • 如果項目比較大，首屏無論怎么做優化，都出現閃屏或者一陣黑屏的情況。可以考慮使用SSR(服務端渲染)，vuejs官方文檔提供next.js很好的服務端解決方案，但是局限性就是目前僅支持Koa、express等Nodejs的后台框架，需要webpack支持。目前自己了解的就是后端支持方面，vuejs的后端渲染支持php，其它的不太清楚。

3.用戶體驗優化

  • better-click防止iphone點擊延遲
    • 在開發移動端vuejs項目時，手指觸摸時會出現300ms的延遲效果，可以采用better-click對ipone系列的兼容體驗優化。
  • 菊花loading
    • 菊花loading，在加載資源過程之中，可以提供loading。此菊花loading不是那菊花。所以可以自由選擇自己喜歡的菊花。
  • 骨架屏加載

    • 在首屏加載資源較多，可能會出現白屏和閃屏的情況。體驗不好。盜圖一波，小米商城使用骨架屏進行首屏在資源數據還沒有加載完成時顯示，給很好的體驗效果。

       


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 vuejs項目性能優化總結 vue項目性能優化總結 XCel 項目總結 - Electron 與 Vue 的性能優化 EF+MVC+cod First項目性能優化總結 Echarts + Vue 項目性能優化分析總結 Unity游戲項目性能優化總結 （難度3 推薦4） 性能優化之Mysql優化總結 MySQL性能優化總結 React性能優化總結 VUE性能優化總結
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM