Nginx 如何优化静态资源？有哪些优化策略？

Nginx 在提供静态资源方面表现优异，通过合理的配置可以显著提升静态资源的加载速度和用户体验。

启用高效文件传输：

nginx
http {
    # 启用 sendfile
    sendfile on;
    
    # 启用 tcp_nopush
    tcp_nopush on;
    
    # 启用 tcp_nodelay
    tcp_nodelay on;
    
    server {
        listen 80;
        server_name example.com;
        
        root /var/www/html;
        
        location / {
            try_files $uri $uri/ =404;
        }
    }
}

Gzip 压缩：

nginx
http {
    # 启用 Gzip
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types text/plain text/css text/xml text/javascript 
               application/json application/javascript 
               application/xml+rss application/rss+xml 
               application/atom+xml image/svg+xml;
    gzip_disable "msie6";
    
    # 静态资源预压缩
    gzip_static on;
    
    server {
        listen 80;
        server_name example.com;
        
        root /var/www/html;
        
        location / {
            try_files $uri $uri/ =404;
        }
    }
}

浏览器缓存：

nginx
server {
    listen 80;
    server_name example.com;
    
    root /var/www/html;
    
    # 静态资源长期缓存
    location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
    }
    
    # HTML 文件短期缓存
    location ~* \.html$ {
        expires 1h;
        add_header Cache-Control "public, must-revalidate";
    }
    
    # 不缓存动态内容
    location ~* \.php$ {
        expires off;
        add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
    }
    
    location / {
        try_files $uri $uri/ =404;
    }
}

文件缓存：

nginx
http {
    # 打开文件缓存
    open_file_cache max=100000 inactive=20s;
    open_file_cache_valid 30s;
    open_file_cache_min_uses 2;
    open_file_cache_errors on;
    
    server {
        listen 80;
        server_name example.com;
        
        root /var/www/html;
        
        location / {
            try_files $uri $uri/ =404;
        }
    }
}

静态资源分离：

nginx
server {
    listen 80;
    server_name example.com;
    
    # 主站点
    location / {
        root /var/www/html;
        try_files $uri $uri/ =404;
    }
    
    # 静态资源
    location /static/ {
        root /var/www/static;
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
    }
    
    # 图片资源
    location /images/ {
        root /var/www/images;
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
    }
    
    # 字体文件
    location /fonts/ {
        root /var/www/fonts;
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
        add_header Access-Control-Allow-Origin *;
    }
}

CDN 集成：

nginx
server {
    listen 80;
    server_name example.com;
    
    root /var/www/html;
    
    # 重写静态资源 URL 到 CDN
    location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2)$ {
        return 301 https://cdn.example.com$request_uri;
    }
    
    location / {
        try_files $uri $uri/ =404;
    }
}

图片优化：

nginx
server {
    listen 80;
    server_name example.com;
    
    root /var/www/html;
    
    # 图片缓存
    location ~* \.(jpg|jpeg|png|gif|ico|svg|webp)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
        
        # WebP 支持
        if ($http_accept ~* "webp") {
            rewrite ^(.+)\.(jpg|png)$ $1.webp last;
        }
    }
    
    # 图片防盗链
    location ~* \.(jpg|jpeg|png|gif)$ {
        valid_referers none blocked example.com *.example.com;
        if ($invalid_referer) {
            return 403;
        }
    }
    
    location / {
        try_files $uri $uri/ =404;
    }
}

字体文件优化：

nginx
server {
    listen 80;
    server_name example.com;
    
    root /var/www/html;
    
    # 字体文件
    location ~* \.(woff|woff2|ttf|otf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
        
        # CORS 支持
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "GET, OPTIONS";
        add_header Access-Control-Allow-Headers "Origin, Content-Type";
    }
    
    location / {
        try_files $uri $uri/ =404;
    }
}

静态资源预加载：

nginx
server {
    listen 80;
    server_name example.com;
    
    root /var/www/html;
    
    location = / {
        add_header Link "</style.css>; rel=preload; as=style, </script.js>; rel=preload; as=script, </image.jpg>; rel=preload; as=image";
        try_files $uri $uri/ =404;
    }
    
    location / {
        try_files $uri $uri/ =404;
    }
}

HTTP/2 推送：

nginx
server {
    listen 443 ssl http2;
    server_name example.com;
    
    ssl_certificate /etc/nginx/ssl/example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/example.com.key;
    
    root /var/www/html;
    
    # HTTP/2 推送
    location = / {
        http2_push /style.css;
        http2_push /script.js;
        http2_push /image.jpg;
        
        try_files $uri $uri/ =404;
    }
    
    location / {
        try_files $uri $uri/ =404;
    }
}

静态资源合并：

nginx
# 使用第三方模块 ngx_http_concat_module
server {
    listen 80;
    server_name example.com;
    
    root /var/www/html;
    
    # CSS 合并
    location /static/css/ {
        concat on;
        concat_types text/css;
        concat_unique on;
        concat_max_files 10;
    }
    
    # JS 合并
    location /static/js/ {
        concat on;
        concat_types application/javascript;
        concat_unique on;
        concat_max_files 10;
    }
    
    location / {
        try_files $uri $uri/ =404;
    }
}

完整静态资源优化配置：

nginx
user nginx;
worker_processes auto;
worker_rlimit_nofile 65535;

events {
    worker_connections 10240;
    use epoll;
    multi_accept on;
}

http {
    # 基础优化
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    
    # Gzip 压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types text/plain text/css text/xml text/javascript 
               application/json application/javascript 
               application/xml+rss application/rss+xml 
               application/atom+xml image/svg+xml;
    gzip_disable "msie6";
    gzip_static on;
    
    # 文件缓存
    open_file_cache max=100000 inactive=20s;
    open_file_cache_valid 30s;
    open_file_cache_min_uses 2;
    open_file_cache_errors on;
    
    # 静态资源长期缓存
    map $sent_http_content_type $expires {
        default off;
        text/html 1h;
        text/css 1y;
        application/javascript 1y;
        ~image/ 1y;
        ~font/ 1y;
    }
    
    server {
        listen 80;
        server_name example.com;
        
        root /var/www/html;
        index index.html;
        
        # 静态资源优化
        location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2|ttf|eot)$ {
            expires $expires;
            add_header Cache-Control "public, immutable";
            access_log off;
        }
        
        # 字体文件 CORS
        location ~* \.(woff|woff2|ttf|otf|eot)$ {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods "GET, OPTIONS";
            add_header Access-Control-Allow-Headers "Origin, Content-Type";
        }
        
        # 图片防盗链
        location ~* \.(jpg|jpeg|png|gif)$ {
            valid_referers none blocked example.com *.example.com;
            if ($invalid_referer) {
                return 403;
            }
        }
        
        # 主路由
        location / {
            try_files $uri $uri/ =404;
        }
        
        # 禁止访问隐藏文件
        location ~ /\. {
            deny all;
            access_log off;
            log_not_found off;
        }
    }
}

静态资源优化最佳实践：

启用压缩：使用 Gzip 压缩文本资源
合理缓存：根据资源类型设置缓存时间
文件分离：将静态资源分离到独立域名或 CDN
预压缩：使用 gzip_static 预压缩静态文件
HTTP/2：启用 HTTP/2 提升加载速度
图片优化：使用 WebP 格式，启用图片压缩
字体优化：使用 WOFF2 格式，启用 CORS
监控性能：使用 Lighthouse 等工具监控性能
定期清理：清理未使用的静态资源
版本控制：使用文件名哈希实现缓存更新