vuejs项目性能优化总结*

vuejs项目性能优化总结

对于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:
2.对项目代码中的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状态：

3.对路由组件进行懒加载
在路由配置文件里，这里是router.js里面引用组件。

配置config/index.js(第1,2步)

'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
  }
};




//出现的问题
在npm install --save-dev compression-webpack-plugin时报错
 throw new _ValidationError.default(errors, schema, configuration);
    ^
是因为compression-webpack-plugin的版本太高了
3、找到症结所在，那处理起来就简单了。既然最新版本太高，在用的webpack高攀不起，那就只能给它降级了，木得法。
　　①卸载已经安装的最新版2.0 compression-webpack-plugin 安装包。

　　npm uninstall --save-dev compression-webpack-plugin
　　② 重新安装1.1.12版本(该版本为1.1的最新版)。卸载其实可以不用，直接执行安装命令，进行版本覆盖也行。

　　npm install --save-dev compression-webpack-plugin@1.1.12　　　　//记得带版本号
　　③等安装好之后，重新执行 npm run build 进行打包，终于成功了，