vue-cli开启gzip压缩、后台开启gzip

使用vue-cli创建项目。

第一步：下载插件

特别注意版本问题，如果出现版本的错误，可以下载低版本的插件。

npm install --save-dev compression-webpack-plugin

第二步：找到config文件夹下的index.js文件，productionGzip改为true，开启gzip压缩。

第三步：找到build文件夹下的webpack.prod.conf.js文件，配置gzip。

代码如下：

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

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

后台开启gzip

nginx开启gzip

http {
gzip on; #开启或关闭gzip on off
 gzip_disable "msie6"; #不使用gzip IE6
 gzip_min_length 100k; #gzip压缩最小文件大小，超出进行压缩（自行调节）
 gzip_buffers 4 16k; #buffer 不用修改
 gzip_comp_level 3; #压缩级别:1-10，数字越大压缩的越好，时间也越长
 gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  压缩文件类型
 gzip_vary off;  #跟Squid等缓存服务有关，on的话会在Header里增加 "Vary: Accept-Encoding"
}