Vue中打包压缩插件：compression-webpack-plugin

1.http gzip 介绍

Encoding type：

1. gzip：GNU zip 压缩格式，也是互联网上最流行的压缩格式；
2. deflate：zlib（deflate）压缩格式，流行程度仅次于 gzip；
3. br：一种专门为 HTTP 优化的新压缩算法（Brotli）。

HTTP 协议为此定义了两个 Accept 请求头字段和两个 Content 实体头字段，用于客户端和服务器进行“内容协商”。也就是说，客户端用 Accept 头告诉服务器希望接收什么样的数据，而服务器用 Content 头告诉客户端实际发送了什么样的数据。

Accept字段标记的是客户端可理解的 MIME type，可以用“,”做分隔符列出多个类型，让服务器有更多的选择余地，例如下面的这个头：
Accept-Encoding字段标记的是客户端支持的压缩格式，例如上面说的 gzip、deflate 等，同样也可以用“,”列出多个，服务器可以选择其中一种来压缩数据，实际使用的压缩格式放在响应头字段Content-Encoding里。

Accept-Encoding: gzip, deflate, br
Content-Encoding: gzip

不过这两个字段是可以省略的，如果请求报文里没有 Accept-Encoding 字段，就表示客户端不支持压缩数据；如果响应报文里没有 Content-Encoding 字段，就表示响应数据没有被压缩。

2.安装 compression-webpack-plugin

npm install --save-dev [email protected]

3.配置

在项目根目录新建配置文件 vue.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin')

  module.exports = {
      configureWebpack: {
            plugins: [
              // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
              new CompressionPlugin({
                test: /\.(js|css|html)?$/i, // 压缩文件格式
                filename: '[path].gz[query]', // 压缩后的文件名
                algorithm: 'gzip', // 使用gzip压缩
                // 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
                // threshold: 10240,
                minRatio: 0.8, // 压缩率小于1才会压缩
                deleteOriginalAssets: true // 是否删除原资源
      })
    ]
      }
  

**4.nginx.conf中配置

http {
	gzip on;
	gzip_static on;
	gzip_min_length 1k;
	gzip_buffers 4 32k;
	gzip_http_version 1.1;
	gzip_comp_level 2;
	gzip_types text/plain application/x-javascript text/css application/xml;
	gzip_vary on;
	gzip_disable "MSIE [1-6].";

    server {
    
    }
}

配置完成后，重启nginx

systemctl restart nginx 

5.压缩前后大小对比

6.通过nginx访问项目，查看压缩信息

从上面可以看看出 Content-Encoding : gzip ，返回的是压缩的文件