CDN场景下优化JavaScript分发需Nginx与CDN协同：统一由CDN管控缓存头，禁用Nginx主动缓存指令；启用Brotli+Gzip双压缩作兜底；分离JS路径并哈希命名以利精准缓存；禁用运行时改写确保SRI与缓存一致性。
在CDN场景下优化JavaScript资源分发，核心是让Nginx与CDN协同工作，避免缓存冲突、减少回源、提升首字节时间和执行效率。关键不在Nginx单独调优，而在于它如何配合CDN的缓存策略、边缘节点行为和客户端加载逻辑。
统一缓存控制头，避免CDN与Nginx策略打架
Nginx若自行设置 Cache-Control 或 Expires，可能覆盖CDN预设的缓存规则，导致边缘节点不缓存或过早失效。应由CDN统一管控缓存周期，Nginx只负责透传或补充必要头信息。
- 关闭Nginx对JS文件的主动缓存指令（如注释掉
expires、add_header Cache-Control等） - 确保CDN控制台或配置中为
*.js设置合理缓存时间（如 public, max-age=31536000），并开启强制缓存（stale-while-revalidate 可选） - 若需Nginx辅助，仅添加无冲突头：例如
add_header X-Content-Type-Options nosniff;或add_header X-XSS-Protection "1; mode=block";
启用Brotli + Gzip双压缩，适配不同CDN节点能力
部分CDN（如Cloudflare、阿里云全站加速）支持Brotli，但老旧边缘节点或中间代理可能只认Gzip。Nginx可同时启用两者，并依赖 Accept-Encoding 自动协商，确保压缩不降级。
- 编译Nginx时启用
--with-http_brotli_module（或使用OpenResty等集成版本） - 配置示例：
brotli on; brotli_comp_level 6; brotli_types application/javascript text/css; gzip on; gzip_vary on; gzip_types application/javascript text/css;
- 注意：CDN通常会解压再重新压缩，因此建议在CDN层开启Brotli（更高效），Nginx作为兜底；若CDN不支持Brotli，则Nginx开启并关闭CDN的自动压缩功能
分离静态JS路径，便于CDN精准匹配与预热
将JS资源集中到独立路径（如 /static/js/ 或 /assets/js/），有利于CDN配置细粒度缓存策略、设置差异化TTL、触发主动预热，也方便后续做版本化与SRI校验。
立即学习“Java免费学习笔记（深入）”；
- Nginx中用
location ^~ /static/js/块隔离处理，避免与其他动态路由冲突 - 配合构建工具输出带哈希的文件名（如
app.a1b2c3d4.js），并在HTML中引用；CDN可对带哈希路径设置永久缓存（max-age=31536000），无需担心更新问题 - 若使用HTTP/2 Server Push（已逐步弃用）或 preload link，确保Nginx不拦截
Link头：add_header Link "</static/js/app.js>; rel=preload; as=script";
限制非必要重写与模块干预，保持CDN链路轻量
某些Nginx模块（如 sub_filter、lua_rewrite）会在响应体中动态修改JS内容，破坏完整性校验（SRI）、引发CDN缓存分裂，甚至导致语法错误。CDN场景下应尽量规避运行时改写。
- 禁用针对JS响应体的文本替换（如
sub_filter替换域名或变量）——这类逻辑应前置到构建阶段或通过环境变量注入 - 避免用Lua/NJS在
access_by_lua*阶段对JS请求做鉴权或跳转，这会阻塞响应、增加延迟，且CDN通常已承担边缘鉴权职责 - 如需灰度发布，优先使用CDN的A/B测试或URL参数路由能力，而非Nginx if+rewrite
