性能优化：Nginx配置 GZIP 压缩、强缓存与 HTTP/2背景使用nginx部署web项目，调整nginx的配置

背景

使用nginx部署web项目，调整nginx的配置进行性能优化。

GZIP 压缩：压缩响应数据，减少文件大小，提升传输效率。
强缓存：通过缓存策略减少重复请求，减轻服务器负担，提升响应速度。
HTTP/2：优化并行（多路复用）请求和传输，提升页面加载速度，减少延迟。

nginx配置

server
{
    listen 80;
    listen 443 ssl http2;
    server_name xxx.domain.com;
    index index.html index.htm default.htm default.html;

    gzip on; # 开启gzip压缩
    gzip_vary on; # 根据请求头中的'Accept-Encoding'启用压缩
    gzip_proxied any; # 无论请求是否来自代理，都进行压缩
    gzip_comp_level 5; # 压缩级别，1（最快）到9（最小）
    gzip_min_length 256; # 只压缩大于256字节的响应
    gzip_types text/plain application/xml application/json application/javascript text/css text/js text/xml application/x-javascript text/javascript ; # 指定压缩的MIME类型
    gzip_disable "MSIE [1-6]\.(?!.*SV1)"; # 不对IE6及以下版本的浏览器启用Gzip
    
    # 静态js css资源强缓存12小时
    location ~ .*\\.(js|css)?$
    {
        expires      12h;
    }

    # 不变资源强缓存（这里单独配置是因为5173项目返回资源的时候返回了 Cache-Control:no-store 请求头）
    location /node_modules/@dcloudio/uni-h5/dist/uni-h5.es.js {
        proxy_pass http://127.0.0.1:5173;
        proxy_hide_header Cache-Control;  # 隐藏后端服务器返回的 Cache-Control 头
        add_header Cache-Control "public, max-age=604800";  # 缓存一周,根据业务变动修改
    }
}

优化前后对比

gzip压缩

开启前

开启后

可以看到：文件大小，传输时间，完成时间，dom加载时间都得到了优化。

注意：使用 Vite 和 Webpack 插件打包生成.gzip 文件可以优化首次访问速度，可以避免 Nginx 在首次请求时的动态压缩耗时。
因为 Nginx 开启 gzip 功能后，如果没找到gzip文件，会将首次访问的文件压缩并缓存，以便后续请求可以直接提供压缩文件。直接提供就省去了这步操作。