vue-cli2.0与vue-cli3.0如何开启Gzip压缩

vue-cli2

 下载Plugin插件：npm install --save-dev compression-webpack-plugin@1.1.12，找到webpack.prod.conf.js中的如下代码：

if (config.build.productionGzip) {
  //开启gzip
  const CompressionWebpackPlugin = require('compression-webpack-plugin')
  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      //注意此属性名为filename而非assets
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

 进入到config文件夹下找到index.js文件修改如下配置：

 注意：在生产环境下需要将productionSourceMap关闭(作用为便于找到报错信息的位置)，并将productionGzip开启。
 使用npm run build命令进行打包即可~

vue-cli3

 需下载plugin插件输入如下命令npm install --save-dev compression-webpack-plugin，修改vue.config.js中如下代码：

//使用gzip
const CompressionPlugin = require("compression-webpack-plugin")
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
  configureWebpack: (config) => { 
    plugins: [
      new CompressionPlugin({
        filename: "[path].gz[query]",
        algorithm: "gzip",
        test: productionGzipExtensions,
        // 只处理大于xx字节 的文件，默认：0
        threshold: 10240,
        // 示例：一个1024b大小的文件，压缩后大小为768b，minRatio : 0.75
        minRatio: 0.8, // 默认: 0.8
        // 是否删除源文件，默认: false
        deleteOriginalAssets: false
      })
    ]
  }
};

 输入npm run build打包命令即可~