如何在Universal Angular与Nginx中启用Gzip文本压缩？

嘿，我来帮你搞定这个事儿——其实操作起来分两大块，先从Angular构建这边做些优化（可选但能减轻服务器压力），再重点配置Nginx的压缩规则就行，一步步来：

第一步：Angular项目构建预压缩（可选但推荐） #

虽然Nginx可以动态压缩资源，但提前在构建时生成gzip版本的静态文件，能让服务器少做些实时压缩的工作，性能更好。你可以这么配置：

• 打开项目根目录的angular.json，找到你的项目配置（路径大概是projects -> [你的项目名] -> architect -> build -> options）
• 在options里添加或调整这些配置：

  "buildOptimizer": true,
  "compress": true,
  "outputHashing": "all"
  

• 要是你用的是Angular 12及以上版本，直接在构建命令里加个参数就能生成gzip文件：

  ng build --prod --compress=gzip
  

执行完构建后，去dist目录看看，会发现每个静态文件（比如.js、.css）都对应一个.gz后缀的压缩版。

第二步：配置Nginx开启Gzip压缩 #

这是最核心的一步，得修改Nginx的配置文件——通常是主配置nginx.conf，或者站点单独的配置文件（比如/etc/nginx/sites-available/你的站点名.conf）。

1. 开启基础Gzip全局配置 #

找到配置里的http块，添加这些内容（如果已经有相关配置，调整参数就行）：

gzip on;
gzip_vary on; # 告诉缓存服务器根据编码返回资源
gzip_min_length 1024; # 只压缩大于1KB的文件，小文件没必要浪费资源
gzip_comp_level 6; # 压缩级别（1-9），6是压缩比和性能的平衡点，最常用
gzip_types
  text/plain
  text/css
  text/xml
  text/javascript
  application/javascript
  application/xml+rss
  application/json
  text/html; # 指定要压缩的文本类资源类型
gzip_proxied any; # 对反向代理过来的请求也启用压缩（毕竟Universal是Node服务，Nginx要转请求过去）

2. 优先使用预压缩的静态文件（如果做了第一步） #

要是你已经在Angular构建时生成了.gz文件，让Nginx直接返回这些文件，不用实时压缩：
在站点的server块里加这段配置：

location ~* \.(js|css|html|json)$ {
  gzip_static on; # 检查是否存在预压缩的.gz文件，有就直接返回
  expires 1y; # 给静态资源设1年缓存，优化重复访问速度
  add_header Cache-Control "public, immutable";
}

3. 确保反向代理到Universal Node服务的配置正确 #

因为Universal Angular是服务端渲染，Nginx得把请求转发到你的Node服务（默认端口一般是4000），这段配置别漏了：

location / {
  proxy_pass http://localhost:4000; # 替换成你的Node服务实际地址
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header X-Forwarded-Proto $scheme;
}

验证是否生效 #

配置完后，重启Nginx让改动生效：

sudo systemctl restart nginx

然后打开浏览器的开发者工具（Network标签），随便刷新个页面：

• 看响应头里有没有Content-Encoding: gzip
• 同时会有Vary: Accept-Encoding，说明服务器支持压缩
• 要是用了预压缩文件，Content-Length会比原始文件小很多，一眼就能看出来

内容的提问来源于stack exchange，提问作者Alex Onofre