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