Nginx配置中如何优化静态资源加载

想让网站飞起来？静态资源加载速度是关键。Nginx作为前端网关，配置得当能带来立竿见影的效果。今天，我们就来聊聊几个经过实战检验的优化策略。

1. 启用Gzip压缩

这是最经典、也最有效的一招。开启Gzip能大幅压缩文本类资源，传输的数据量小了，加载自然就快了。通常，我们会针对特定的MIME类型开启压缩。

gzip on;
gzip_types text/plain text/css application/json application/ja vascript text/xml application/xml application/xml+rss text/ja vascript;

2. 设置缓存

让浏览器把静态资源“记住”，下次访问时直接从本地读取，这能极大减少对服务器的请求。对于图片、样式表、脚本这些不常变动的文件，设置一个较长的过期时间是明智之举。

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 30d;
    add_header Cache-Control "public";
}

3. 启用HTTP/2

如果你的服务已经上了HTTPS，那务必启用HTTP/2。它带来的多路复用和头部压缩，能显著提升多个资源加载的效率，尤其是对于现代依赖大量小文件的网站。

server {
    listen 443 ssl http2;
    server_name example.com;
    ssl_certificate /path/to/certificate.pem;
    ssl_certificate_key /path/to/privatekey.pem;
    # 其他配置...
}

4. 使用CDN

对于用户分布广泛的站点，将静态资源推送到内容分发网络（CDN）是个好选择。这不仅能减轻源站压力，还能让用户从地理上最近的节点获取资源，降低延迟。在Nginx中，可以通过反向袋里将特定路径的请求导向CDN。

location /static/ {
    proxy_pass http://cdn.example.com/static/;
    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;
}

5. 合并和压缩CSS和Ja vaScript文件

虽然HTTP/2缓解了“队头阻塞”问题，但减少文件数量依然是前端优化的黄金法则。在构建阶段合并、压缩CSS和JS文件，再配合Nginx的Gzip压缩，能有效减少请求数和传输体积。

location ~* \.(css|js)$ {
    gzip on;
    gzip_min_length 1000;
    gzip_comp_level 6;
    gzip_types text/plain text/css application/json application/ja vascript text/xml application/xml application/xml+rss text/ja vascript;
}

6. 使用Keep-Alive

保持TCP连接存活，避免为每个HTTP请求都经历三次握手和四次挥手，这对性能提升很有帮助。在Nginx中，可以调整连接保持的时间和最大请求数。

http {
    keepalive_timeout 65;
    keepalive_requests 100;
    server {
        listen 80;
        server_name example.com;
        location / {
            proxy_pass http://backend;
            proxy_http_version 1.1;
            proxy_set_header Connection "";
        }
    }
}

7. 优化图片

图片往往是页面体积的“大头”。除了设置缓存，更根本的是在发布前就做好优化：选择合适的格式（比如WebP）、调整尺寸、进行有损或无损压缩。Nginx可以配合缓存策略，确保优化后的图片高效送达。

location ~* \.(jpg|jpeg|png)$ {
    expires 30d;
    add_header Cache-Control "public";
    try_files $uri $uri/ =404;
}

8. 使用HTTP/3

这是面向未来的优化。基于QUIC协议的HTTP/3能更好地处理丢包和高延迟场景，如果您的服务器环境和客户端（如较新版本的浏览器）都已支持，尝试启用它可能会带来惊喜。

server {
    listen 443 ssl http3;
    server_name example.com;
    ssl_certificate /path/to/certificate.pem;
    ssl_certificate_key /path/to/privatekey.pem;
    # 其他配置...
}

好了，以上就是优化Nginx静态资源加载的几个核心配置。当然，具体采用哪些策略，还得看您的实际业务需求和技术栈。不妨从Gzip和缓存开始，逐步尝试，找到最适合您网站的那套组合拳。