vue 配置gzip 压缩 nginx 处理

611 阅读1分钟

1、 vue.config.js

安装插件 npm i compression-webpack-plugin@5.0.1 --save-dev

vue.config.js

//gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const compress = new CompressionWebpackPlugin({
  filename: info => {
    return `${info.path}.gz${info.query}`
  },
  algorithm: 'gzip',
  threshold: 10240,
  test: new RegExp('\\.(' + ['js'].join('|') + ')$'),
  minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
  deleteOriginalAssets: true // 删除原文件
})

image.png

2、nginx

    gzip  on;
    # 设置gzip压缩针对的HTTP协议版本
    gzip_http_version   1.1;
    # 静态压缩
    gzip_static on;
    gzip_proxied expired no-cache no-store private auth;
    # 禁止ie 几进行gzip压缩
    gzip_disable "MSIE [1-6]\.";
    # 代理缓存压缩和原始版本资源
    gzip_vary on;

image.png

重启 nginx -s reload