在使用elementUI構建公司管理系統(tǒng)時，發(fā)現(xiàn)首屏加載時間長，加載的網絡資源比較多梭冠，對系統(tǒng)的體驗性會差一點，而且用webpack打包的vuejs的vendor包會比較大自赔。所以通過搜集網上所有對于vuejs項目的性能優(yōu)化妈嘹，做了有關3方面的優(yōu)化建議，主要包括：上線代碼包打包绍妨、源碼編寫優(yōu)化润脸、用戶體驗優(yōu)化。(下面的優(yōu)化建議只在vue-cli腳手架下做過測試他去，詳情請參考)
1.代碼包優(yōu)化
- 屏蔽sourceMap
- 待下項目開發(fā)完成毙驯。進行打包源碼上線環(huán)節(jié)，需要對項目開發(fā)環(huán)節(jié)的開發(fā)提示信息以及錯誤信息進行屏蔽灾测，一方面可以減少上線代碼包的大斜邸；另一方面提高系統(tǒng)的安全性媳搪。在vuejs項目的config目錄下有三個文件dev.env.js(開發(fā)環(huán)境配置文件)铭段、prod.env.js(上線配置文件)、index.js(通用配置文件)秦爆。vue-cli腳手架在上線配置文件會自動設置允許sourceMap打包序愚，所以在上線前可以屏蔽sourceMap。如下所示等限，index.js的配置如下,通用配置文件分別對開發(fā)環(huán)境和上線環(huán)境做了打包配置分類爸吮，在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會出現(xiàn)頻率比較大)，gzip會對js丽惶、css文件進行壓縮處理炫七；對于圖片進行壓縮問題，對于png钾唬，jpg万哪，jpeg沒有壓縮效果侠驯，對于svg，ico文件以及bmp文件壓縮效果達到50%奕巍，在productionGzipExtensions: ['js', 'css','svg']設置需要進行壓縮的什么格式的文件吟策。對項目文件進行壓縮之后，需要瀏覽器客戶端支持gzip以及后端支持gzip的止。下面可以查看成功支持gzip狀態(tài)：
'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
}
}
- image
-
對路由組件進行懶加載
- 在路由配置文件里檩坚，這里是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）,可以看見加載速度明顯加快。但是進行懶加載之后崩溪，實現(xiàn)按需加載浅役，那么項目打包不會把所有js打包進app.[hash].js里面，優(yōu)點是可以減少app.[hash].js體積伶唯，缺點就是會把其它js分開打包觉既，造成多個js文件，會有多次https請求抵怎。如果項目比較大奋救，需要注意懶加載的效果岭参。
// 實現(xiàn)懶加載方式 import Vue from "vue"; import Router from "vue-router"; Vue.use(Router); export default new Router({ mode: "history", base: "/facex/district/", routes: [ { path: "/", redirect: "index" }, { path: "/", name: "home", component: resolve=>require(["@/views/home"],resolve), children: [ { // 員工查詢 path: "/employees", component: resolve=>require(["@/components/employees"],resolve) }, { // 首頁 path: "/index", component: resolve=>require(["@/views/index"],resolve) }, { // 訪客查詢 path: "/visitorlist", component: resolve=>require(["@/components/visitorlist"],resolve) }, { path: "/department", component: resolve=>require(["@/views/department"],resolve) }, //識別查詢 { path: "/discriminate", component: resolve=>require(["@/components/discriminate"],resolve) }, { path: "/addDevice", component: resolve=>require(["@/views/addDevice"],resolve) }, { path: "/districtNotice", component: resolve=>require(["@/components/districtNotice"],resolve) } ] }, { path: "/noticeList", name: "noticeList", component: resolve=>require(["@/views/noticeList"],resolve) }, { path: "/login", name: "login", component: resolve=>require(["@/views/login"],resolve) }, { path: "/register", name: "register", component: resolve=>require(["@/views/register"],resolve) }, { path: "/setaccount", name: "setaccount", component:resolve=>require(["@/views/setaccount"],resolve) }, { path: "/addGroup", name: "addGroup", component:resolve=>require(["@/views/addGroup"],resolve) }, { path: "/guide", name: "guide", component:resolve=>require(["@/components/guide"],resolve) }, { path: "/addNotice", name: "addNotice", component: resolve=>require(["@/views/addNotice"],resolve) } ] });i
2.源碼優(yōu)化
- v-if 和 v-show選擇調用
- v-show和v-if的區(qū)別是：v-if是懶加載反惕，當狀態(tài)為true時才會加載，并且為false時不會占用布局空間演侯；v-show是無論狀態(tài)是true或者是false姿染，都會進行渲染，并對布局占據(jù)空間對于在項目中秒际，需要頻繁調用悬赏，不需要權限的顯示隱藏，可以選擇使用v-show娄徊，可以減少系統(tǒng)的切換開銷闽颇。
- 為item設置唯一key值，
- 在列表數(shù)據(jù)進行遍歷渲染時寄锐，需要為每一項item設置唯一key值兵多，方便vuejs內部機制精準找到該條列表數(shù)據(jù)尖啡。當state更新時，新的狀態(tài)值和舊的狀態(tài)值對比剩膘，較快地定位到diff衅斩。
- 細分vuejs組件
- 在項目開發(fā)過程之中，第一版本把所有的組件的布局寫在一個組件中怠褐，當數(shù)據(jù)變更時畏梆，由于組件代碼比較龐大，vuejs的數(shù)據(jù)驅動視圖更新比較慢奈懒，造成渲染比較慢奠涌。造成比較差的體驗效果。所以把組件細分筐赔，比如一個組件铣猩，可以把整個組件細分成輪播組件、列表組件茴丰、分頁組件等达皿。
- 減少watch的數(shù)據(jù)
- 當組件某個數(shù)據(jù)變更后需要對應的state進行變更，就需要對另外的組件進行state進行變更贿肩÷鸵可以使用watch監(jiān)聽相應的數(shù)據(jù)變更并綁定事件。當watch的數(shù)據(jù)比較小汰规，性能消耗不明顯汤功。當數(shù)據(jù)變大，系統(tǒng)會出現(xiàn)卡頓溜哮，所以減少watch的數(shù)據(jù)滔金。其它不同的組件的state雙向綁定，可以采用事件中央總線或者vuex進行數(shù)據(jù)的變更操作茂嗓。
- 內容類系統(tǒng)的圖片資源按需加載
- 對于內容類系統(tǒng)的圖片按需加載餐茵，如果出現(xiàn)圖片加載比較多，可以先使用v-lazy之類的懶加載庫或者綁定鼠標的scroll事件述吸，滾動到可視區(qū)域先再對數(shù)據(jù)進行加載顯示忿族，減少系統(tǒng)加載的數(shù)據(jù)。
- SSR(服務端渲染)
- 如果項目比較大蝌矛，首屏無論怎么做優(yōu)化道批，都出現(xiàn)閃屏或者一陣黑屏的情況∪肴觯可以考慮使用SSR(服務端渲染)隆豹，vuejs官方文檔提供next.js很好的服務端解決方案，但是局限性就是目前僅支持Koa茅逮、express等Nodejs的后臺框架璃赡，需要webpack支持簿煌。目前自己了解的就是后端支持方面，vuejs的后端渲染支持php鉴吹，其它的不太清楚姨伟。
3.用戶體驗優(yōu)化
- better-click防止iphone點擊延遲
- 在開發(fā)移動端vuejs項目時，手指觸摸時會出現(xiàn)300ms的延遲效果豆励，可以采用better-click對ipone系列的兼容體驗優(yōu)化夺荒。
- 菊花loading
- 菊花loading，在加載資源過程之中良蒸，可以提供loading技扼。此菊花loading不是那菊花。所以可以自由選擇自己喜歡的菊花嫩痰。
- 骨架屏加載
-
在首屏加載資源較多剿吻，可能會出現(xiàn)白屏和閃屏的情況。體驗不好串纺。盜圖一波丽旅，小米商城使用骨架屏進行首屏在資源數(shù)據(jù)還沒有加載完成時顯示，給很好的體驗效果纺棺。
image
-
引用參考:
Vue頁面骨架屏的實現(xiàn)方法
淺談 Vue 項目優(yōu)化
Vue 初始化性能優(yōu)化
Vue 性能優(yōu)化經驗總結
路由懶加載
VUE2組件懶加載淺析
基于VUE的SPA單頁應用開發(fā)－加載性能篇
作者：Evtion
鏈接：http://www.reibang.com/p/41075f1f5297
