一、vue 项目开启gzip 压缩

1 在vue.config.js 里面引入 compression-webpack-plugin

const CompressionWebpackPlugin = require( compression-webpack-plugin )
const productionGzipExtensions = [ js ,  css ,  html ,  svg ,  json ,  txt ,  ico ]
const isPro = (process.env.NODE_ENV ===  production )

2、在chainWebpack配置里面引入‘CompressionWebpackPlugin’

chainWebpack: config => {
    config.resolve.alias
      .set( @ , resolve( src ))
    config.entry( polyfill ).add( @babel/polyfill )

    // nginx gzip压缩

    if (isPro) { // 生产环境下使用gzip 压缩
      config.plugin( compressionPlugin ).use(new CompressionWebpackPlugin({
        filename:  [path].gz[query] ,
        algorithm:  gzip ,
        test: new RegExp(
           \.(  + productionGzipExtensions.join( | ) +  )$ 
        ),
        threshold: 10240, // 只有大小大于该值的资源会被处理 10240
        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
        deleteOriginalAssets: true // 删除原文件
      }))
    }
  }
}

3、打包npm run build 后目标文件里出现 gz 压缩文件即成功

二、nginx 配置gzip

gzip on;
    gzip_static on;
    gzip_min_length 1k;
    gzip_buffers 16 64k;
    gzip_http_version 1.1;
    gzip_comp_level 9;
    gzip_types text/plain text/javascript application/javascript image/jpeg image/gif image/png application/font-woff application/x-javascript text/css application/xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6].";
    root html/subCharge;
    index index.html index.htm;

访问 网站，出现一下标志，证明nginx 配置成功