Nginx静态资源优化实战：速度提升 300%！

Nginx是大型架构核心，下面我详解Nginx静态资源优化@mikechen

为什么静态资源优化如此重要

现代前端应用通常会产生较多构建产物，尤其是单页应用、组件化框架和多媒体内容站点，静态资源规模可能达到数十 MB。

即便 CDN 已经接入，若资源本身未经压缩、缓存命中率低，仍会造成：

首次加载慢；

带宽成本高；

服务器压力大；

用户体验差；

从性能优化的角度看，静态资源优化不是“锦上添花”，而是直接决定系统体验上限的核心环节。

 

Brotli 压缩：比 Gzip 更进一步

Brotli 是 Google 推出的新一代压缩算法，相比传统 Gzip，在文本类资源上通常能获得更高的压缩率，尤其适用于：

HTML；

CSS；

JavaScript；

SVG；

JSON；

字体文件；

在实际应用中，Brotli 的压缩效果通常优于 Gzip，常见场景下可再减少 15%~30% 的传输体积。

对于静态资源较多的网站，这意味着更少的网络传输、更快的内容到达时间。

Nginx 中启用 Brotli

要在 Nginx 中使用 Brotli，通常需要安装 Brotli 模块。配置示例如下：

http {
    # Brotli 动态压缩
    brotli on;
    brotli_comp_level 6;           # 推荐 5-8，平衡 CPU 与压缩率（11 最强但最耗 CPU）
    brotli_min_length 512;         # 小于此大小不压缩
    brotli_buffers 16 8k;
    brotli_window 512k;

    # 优先提供预压缩 .br 文件
    brotli_static on;              # always（强制使用）或 on（存在则使用）

    # 支持的 MIME 类型（重点覆盖文本资源）
    brotli_types text/plain text/css text/xml application/javascript 
                 application/json application/xml+rss 
                 image/svg+xml font/woff font/woff2 font/ttf;

    # Gzip 作为优雅降级
    gzip on;
    gzip_comp_level 6;
    gzip_types text/plain text/css application/javascript ...;
    gzip_vary on;
}

这里需要注意：

brotli on;：开启 Brotli 压缩；

brotli_comp_level：压缩等级，等级越高 CPU 开销越大。

brotli_types：指定需要压缩的 MIME 类型。

brotli_static on;：优先返回预生成的 .br 文件。

 

缓存预热：让热门资源提前就位

如果说 Brotli 解决的是“传输更快”，那么缓存预热解决的就是“第一次访问也要快”。

缓存预热的核心思想是：在用户真正访问之前，提前将高频资源加载到缓存层中，包括：

浏览器缓存优化：

location ~* \.(jpg|jpeg|png|gif|webp|ico|svg|woff2?|ttf|css|js)$ {
    expires 1y;                    # 或 30d，根据更新频率调整
    add_header Cache-Control "public, max-age=31536000, immutable";
    access_log off;
}

Nginx 本地缓存优化：

proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=static_cache:100m max_size=10g inactive=60m use_temp_path=off;

location /static/ {
    proxy_cache static_cache;
    proxy_cache_valid 1y;
    proxy_cache_background_update on;   # 后台更新
}

除此之外，还可以CDN 缓存预热，Redis 或其他中间缓存（如有）。

这样可以减少冷启动带来的延迟，避免首批用户承担回源成本。