vite 项目开启 gzip

今天研究了一下vite项目开启gzip打包，配合nginx踩了一点小坑。特此记录一下

1. vue项目安装插件

pnpm add vite-plugin-compression -D

// vite.config.ts
import viteCompression from 'vite-plugin-compression';

export default defineConfig({
    plugins: [
        // ....其他配置
        viteCompression({
            algorithm: 'gzip',
            deleteOriginFile: false, // 不删除源文件
        }),
    ],
});

2. 配置 nginx

配置静态压缩需要nginx的ngx_http_gzip_static_module模块,我用的1.25.1版本，已经默认安装了该模块。配置前可以先执行 nginx -V命令看下有没有--with-http_gzip_static_module模块。

# nginx.conf 文件

http{

    #......其他配置

    # server模块化
    include       xxx/*.conf;  # nginx.conf同级目录新建文件夹xxx

    # 开启gzip
    gzip on;

    # 静态压缩
    gzip_static on;

    # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
    gzip_min_length 1k;

    # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间
    gzip_comp_level 2;

    # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png image/jpg;

    # 是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;

    # 禁用IE 6 gzip
    gzip_disable "MSIE [1-6]\.";

    server{
        ...
    }
    #......其他配置

}

# xxx文件夹下的 xxxx.conf 文件,名字无所谓,只要后缀是 .conf 就行


server {
    listen          8001;
    server_name     localhost;
    location / {
        root    html/zr-workflow/dist;
        index   index.html;
    }
    location /prod-api/{
        proxy_pass http://192.168.1.164:8667/process-task/;
    }

}

3. 结果

未开启gzip

开启了gzip

冷知识:

1. 看看Response Headers 下有没有Content-Encoding: gzip,有就代表开启了 gzip

2. 看看Etag选项 有没有 W/ 。有：服务器端压缩,gzip_static失效，没有：服务端直接拿的.gz 文件