vuejs項目性能優化總結

時間 2019-11-18

原文原文鏈接

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

1.代碼包優化

屏蔽sourceMap
- 待下項目開發完成。進行打包源碼上線環節，須要對項目開發環節的開發提示信息以及錯誤信息進行屏蔽，一方面能夠減小上線代碼包的大小；另外一方面提升系統的安全性。在vuejs項目的config目錄下有三個文件dev.env.js(開發環境配置文件)、prod.env.js(上線配置文件)、index.js(通用配置文件)。vue-cli腳手架在上線配置文件會自動設置容許sourceMap打包，因此在上線前能夠屏蔽sourceMap。以下所示，index.js的配置以下,通用配置文件分別對開發環境和上線環境作了打包配置分類，在build對象中的配置信息中，productionSourceMap修改爲false:

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/ndindex.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ['js', 'css','svg'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}

對項目代碼中的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狀態：

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/ndindex.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ['js', 'css','svg'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}

ResponseHeader- content-encoding:"gzip"css
對路由組件進行懶加載
- 在路由配置文件裏，這裏是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不是那菊花。因此能夠自由選擇本身喜歡的菊花。
骨架屏加載
- 在首屏加載資源較多，可能會出現白屏和閃屏的狀況。體驗很差。盜圖一波，小米商城使用骨架屏進行首屏在資源數據尚未加載完成時顯示，給很好的體驗效果。html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。