Gzip压缩测试（自用）

gzip 是一种常用的性能优化手段，通过压缩代码加速资源访问速度。

工具：

vue3 + vite demo代码 + nginx (暂时关闭内存缓存 F12->network页面配置 )

测试：

1.不开启gzip压缩。

F12;

结果：

标题	大小	耗时
css文件	171kb	500ms左右
js文件	341kb	700ms左右

2.开启gzip压缩，先开启服务端动态压缩。

配置：

http {
    include       mime.types;
    default_type  application/octet-stream;

    # 开启 gzip
    gzip on; # 开启动态压缩
    gzip_min_length 1k; # 大于1k压缩（测试）
    gzip_comp_level 6; # 压缩等级
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml; # 压缩的资源类型
    gzip_vary on; # 让代理服务器知道响应是经过压缩的
    gzip_disable "msie6"; #禁用对ie6的支持

    # 你的 server 配置...
    server {
        listen       8080;
        server_name  localhost;
        root   资源路径;
        index  index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

F12;

结果：

标题	大小	耗时
css文件	44kb	300ms左右
js文件	47.6kb	300ms左右

与未进行压缩的资源相比无论是资源大小和响应时间大大提升。

3.本地使用vite or webpack进行gzip压缩。（这里只演示vite压缩，webpack自行测试）

配置：

# 安装插件
npm install vite-plugin-compression --save-dev

vite.config.js 配置
import viteCompression from 'vite-plugin-compression'
...
  plugins: [
    viteCompression({
      verbose: true,           // 控制台输出压缩结果
      disable: false,          // 是否禁用
      threshold: 1024,        // 只压缩大于1kb的文件(测试)
      algorithm: 'gzip',       // 压缩算法
      ext: '.gz',              // 生成的压缩包后缀
      deleteOriginFile: false  // 是否删除源文件
    }),
  ]
...

nginx配置: gzip_static on; #可直接预压缩资源

vite开启gzip压缩

本地打包后就会生成对应的gz文件, 再nginx中我们开启了gzip_static配置，nginx就会优先找gz文件，不需要动态压缩了。

F12;

结果：

标题	大小	耗时
css文件	44kb	300ms左右
js文件	47.6kb	300ms左右

与未进行压缩的资源相比无论是资源大小和响应时间大大提升。

总结：

一般生成环境中可以同时开启动态和静态压缩，当没有与压缩文件时，也可通过动态压缩实现。 和浏览器解压资源速度相比，资源的大小更能影响页面显示。

补充：

现在大部分浏览器都支持br压缩，他是一种比gzip压缩率更强的算法，基本用法和gzip差不多，都需要再代理服务器中手动开启，因为我是再window环境下安装的nginx（暂时没有支持br的模块 （wind））有时间再学习。