资源压缩

• 压缩：gzip、br（brotli）

• nginx开启gzip压缩，浏览器会支持解压gzip

压缩格式

• gzip、br（brotli）

Brotli

• Brotli 是谷歌推出的开源压缩算法，比常见的Gzip更高效

• Brotli 压缩只在 https 下生效，因为 在 http 请求中 request header 里的 Accept-Encoding是没有 br 的，只有gzip

gzip压缩兜底

“兜底”主要靠 服务端/网关根据 Accept-Encoding 做内容协商：支持 br 就给 br，不支持就回 gzip，再不支持就回源未压缩

• 浏览器告诉服务器“我能解哪些压缩”，服务器按优先级返回对应版本

• 根据请求头Accept-Encoding类型是否为br或者gzip，服务端会返回对应 .br / .gzip文件

• 前端在打包可以同时产出 gzip 和 br 压缩后的文件

js

plugins: [
  viteCompression({
    algorithm: "brotliCompress",
  }),
  viteCompression({
    algorithm: "gzip",
  }),
  // ……
],

• nginx启用brotli 压缩

bash

http {
    ……
    # 启用 brotli 压缩
    brotli on;
    brotli_comp_level 6;
    brotli_buffers 16 8k;
    brotli_min_length 20;
    brotli_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript image/svg+xml;
    ……
}

nginx配置压缩

• 1、客户端请求 /assets/app.js

• 2、如果 Accept-Encoding 有 br 且存在 app.js.br → 返回 br

• 3、否则如果有 gzip 且存在 app.js.gz → 返回 gzip

• 4、否则 → 返回原 app.js

bash

server {
  listen 80;
  server_name your.domain.com;

  root /usr/share/nginx/html;
  index index.html;

  # ---- 1) 预压缩文件优先：br -> gzip -> 原文件 ----
  # 需要 nginx 有 brotli 模块（ngx_brotli 或发行版自带）
  brotli on;
  brotli_static on;   # 若存在 .br，且客户端 Accept-Encoding 支持 br，则直接返回 .br
  brotli_types
    text/plain text/css text/javascript application/javascript application/json
    application/xml image/svg+xml font/ttf font/otf application/vnd.ms-fontobject;

  gzip on;
  gzip_static on;     # 若存在 .gz，且客户端支持 gzip，则直接返回 .gz
  gzip_vary on;       # 自动加 Vary: Accept-Encoding
  gzip_types
    text/plain text/css text/javascript application/javascript application/json
    application/xml image/svg+xml;

  # ---- 2) 静态资源 ----
  location /assets/ {
    try_files $uri =404;
    # 静态资源缓存（按你版本号策略调整）
    add_header Cache-Control "public, max-age=31536000, immutable";
  }

  # ---- 3) SPA 路由 ----
  location / {
    try_files $uri $uri/ /index.html;
  }
}

查看资源是否命中压缩

• 看响应头：Content-Encoding: gzip