一、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 压缩文件即成功

image.png

二、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 配置成功

image.png