vue cli2.0和3.0 开启gzip压缩

先说cli 2.0的：
下载compression\-webpack\-plugin这个plugin
在你的webpack.prod.conf.js文件里添加以下代码：
（与webpackConfig平级）

//开启gzip压缩
if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

再将config文件夹下的index.js中的productionGzip改为true即可，如果报错

说明你的plugin版本太高了，降低版本即可
npm install --save-dev [email protected]
**
在推荐一个优化，在webpack.prod.conf.js的UglifyJsPlugin中添加一下一句话`
compress: {

      warnings: false,
      // =====以下是新增的=====
      drop_console: true, // 删除页面中的 console.log
      pure_funcs: ['console.log']
      // =====以上是新增的=====
    },

可以去除掉所有的console

接下来说3.0 的（偷我们老大的文章）

下载

npm i \-D compression\-webpack\-plugin

我们老大只是修改了vue.config.js

const CompressionPlugin \= require("compression-webpack-plugin")



 module.exports \= {

 assetsDir: 'public',

 runtimeCompiler: true,

 publicPath: '',

 configureWebpack: config \=> {

 if (process.env.NODE\_ENV \=== "production") {

 return {

 plugins: \[new CompressionPlugin({

 test: /\\.js$|\\.html$|\\.css/,

 threshold:10240,

 deleteOriginalAssets:false

})\]

}

 }
 }

 }

即可