服务器进行压缩配置

一、效果图：

压缩前：

压缩后：

以静态资源css为例，看到文件大小显著减小，请求时间大大缩短。

二、具体配置

1、在vue.config.js中添加webpack配置，以便在打包时生成相应的.gz压缩文件。

configureWebpack: {
        plugins: [
      // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
      new CompressionPlugin({
          filename: '[path].gz[query]', // 目标文件名
          algorithm: 'gzip', // 压缩算法
          test: productionGzipExtensions, // 满足正则表达式的文件会被压缩
          threshold: 10240, // 只处理比这个值大的资源。按字节计算 10240=10KB
          minRatio: 0.8, // 只有压缩率比这个值小的资源才会被处理
          deleteOriginalAssets: false // 是否删除原资源
        })
    ],
  },

2、部署到生产环境，添加nginx配置，以便服务器能返回压缩之后的文件，nginx.conf:

在http块内，server块外，添加如下配置

 # 开启gzip压缩
     gzip on;
     # 不压缩临界值，大于1K的才压缩，一般不用改
     gzip_min_length 1k;
     # 压缩缓冲区
     gzip_buffers 16 64K;
     # 压缩版本（默认1.1，前端如果是squid2.5请使用1.0）
     gzip_http_version 1.1;
     # 压缩级别，1-10，数字越大压缩的越好，时间也越长
     gzip_comp_level 5;
     # 进行压缩的文件类型
     gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
     # 跟Squid等缓存服务有关，on的话会在Header里增加"Vary: Accept-Encoding"
     gzip_vary on;
     # IE6对Gzip不怎么友好，不给它Gzip了
     gzip_disable "MSIE [1-6]\.";

配置完nginx重启项目，打开浏览器开发者工具。

如果出现以上响应头和请求头，说明配置成功。