vue项目优化二

代码包优化

• 屏蔽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
             }
    }