vue-cli20和30-开启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 compression-webpack-plugin@1.1.12
**
在推荐一个优化，在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})\]} } } }

即可