vuejs项目性能优化总结
在使用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" - 对路由组件进行懒加载
- 在路由配置文件里，这里是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请求。若是项目比较大，须要注意懒加载的效果。
// 实现懒加载方式 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