vue 应用生产环境的 webpack 打包配置优化

1. 去掉 console 打印及 debug 信息，加快运行速度

修改 /build/webpack.prod.conf.js 文件配置如下：

const webpackConfig = merge(baseWebpackConfig, {
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          // 以下两行配置，关闭 debug 和 console
          drop_debugger: true,
          drop_console: true
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    })
  ]
})

2. 禁止生成 map 文件，保护源码，同时减小打包体积

修改 /config/index.js 文件配置如下：

module.exports = {
  build: {
    /**
     * Source Maps
     */
    productionSourceMap: false, // 把该项的配置修改为 false，关闭 source map
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map'
  }
}

3. 开启 GZIP 压缩，进一步压缩 js 和 css 文件的体积

修改 /config/index.js 文件配置如下：

module.exports = {
  build: {
    // 默认情况下 Gzip 关闭，因为许多流行的静态主机，如 Surge 或 Netlify 已经为您 gzip 所有静态资源。
    // 将其配置为 true 之前，确保执行以下代码安装 compression-webpack-plugin 插件（默认是安装的最新版本）：
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true, // 开启 gzip 功能
    productionGzipExtensions: ['js', 'css']
  }
}

修改 /build/webpack.prod.conf.js 文件配置如下：

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      // asset: '[path].gz[query]', // 原配置报错：ValidationError: Compression Plugin Invalid Options
      filename: '[path].gz[query]', // 将asset 修改为 filename 后又报错：TypeError: Cannot read property 'emit' of undefined，执行以下操作：npm install --save-dev [email protected]
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

修改服务器的配置，以 Nginx 为例，找到 conf 目录下的 nginx.conf，开启 gzip，并设置 gzip 的类型，如下：

gzip  on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

开启 Gzip 的过程比较波折，请仔细查看注释信息，如有疑问请查看插件的官方文档：
compression-webpack-plugin 插件官方文档