Nginx静态资源分流核心是按需精准路由：按后缀（jpg/css/woff2）分至CDN、本地或设CORS；按路径前缀（/public/、/media/）实现工程化隔离；用map结合变量（UA、地域）做动态策略；并协同缓存与传输优化。
在 Nginx 中做静态资源分流，核心是让不同类型的静态请求走不同的处理路径——不是统一扔给一个目录或后端，而是按规则精准导向 CDN、对象存储、本地磁盘或灰度节点。关键不在“分”，而在“按需分”。
按文件后缀分流最常用也最可靠
浏览器请求的 URL 后缀直接暴露资源类型，Nginx 可用正则快速识别并路由：
-
图片类（jpg/png/webp/gif）→ 指向 CDN 源站或 OSS 网关：
location ~* \.(jpg|jpeg|png|webp|gif)$ {<br> proxy_pass https://cdn-origin.example.com/;<br> expires 1y;<br> add_header Cache-Control "public, immutable";<br>} -
文本类（css/js）→ 启用压缩与长缓存：
location ~* \.(css|js)$ {<br> root /data/www/assets;<br> gzip on;<br> brotli on;<br> expires 1y;<br>} -
字体（woff2/ttf）→ 单独设 MIME 和 CORS：
location ~* \.(woff2|ttf|eot)$ {<br> add_header Access-Control-Allow-Origin *;<br> types { font/woff2 woff2; font/ttf ttf; }<br>}
按路径前缀实现工程化隔离
适合前端打包产物结构清晰的项目，比如 Vue/React 的 dist 目录中 public/、static/、media/ 逻辑分明：
-
/public/ → 映射到构建输出根目录：
location ^~/public/ { root /data/www/dist; } -
/static/vendor/ → 第三方库独立存放，方便灰度更新：
location ^~/static/vendor/ { root /data/www/libs; } -
/media/ → 不落地代理至对象存储：
location ^~/media/ { proxy_pass https://oss.example.com/; }
结合变量做动态策略分流
当需要按设备、地域或内网标识做差异化分发时，map 指令是轻量又灵活的选择：
- 先定义映射关系：
map $http_user_agent $backend {<br> ~*Mobile "mobile-cdn";<br> default "desktop-cdn";<br>} - 再在 location 中使用：
location ~* \.(png|js|css)$ {<br> proxy_pass https://$backend;<br> proxy_set_header Host $host;<br>} - 也可基于 $geoip2_country_code 或自定义 header（如 X-Env: staging）控制灰度流量
分流后必须协同缓存与传输优化
拆得再细，若缓存策略不匹配，反而增加回源压力：
- 启用
sendfile on和tcp_nopush on提升文件传输效率 - 对文本类资源开启
gzip或brotli，设置gzip_types精确命中 - 用
open_file_cache缓存文件句柄，减少 stat 系统调用 - 所有静态响应统一加
Cache-Control，避免浏览器反复校验
