vue--使用gzip压缩js和css

• 后台有开关可以开启gzip，网页头的字段

Content-Encoding: gzip

标示网页是否经过了后台gzip压缩，如果有这个标志，浏览器就会执行解压操作

• 后台返回js文件的时候，会判断是否开启gzip，然后压缩后再还给浏览器。但是nginx其实会先判断是否有.gz后缀的相同文件，有的话直接返回，nginx自己不再进行压缩处理。而压缩是要时间的！不同级别的压缩率花的时间也不一样。所以提前准备gz文件，可以更加优化，所以vue项目打包的时候如果就开启了gzip压缩，会降低服务器压力

• 安装compression-webpack-plugin插件
  vue项目已经对compression-webpack-plugin做了配置，但是默认没有安装，所以必须先安装(最新版本会有各种报错，安装1.1.11正常)

npm install --save-dev [email protected]

• config/index.js中修改下方代码

productionGzip: true,//原来为false
productionGzipExtensions: ['js', 'css'],

• 执行npm run build后会同时生成gzip和对应的js/css，上传服务器，后台会根据情况（浏览器是否支持gzip）来给浏览器返回gzip或对应的js/css

• 配置项:

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

asset:生产的gzip资源名
algorithm:压缩算法
test:匹配的文件名会执行压缩
threshold:大于多少的文件才执行压缩
minRatio:压缩率