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 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

})\]

}

 }
 }

 }

便可