Django + Nginx + Cloudflare CDN 静态资源缓存最佳实践

本文总结在使用 Django Nginx CDN如 Cloudflare部署网站时如何做到✅ 静态资源高效缓存✅ 页面访问速度快❌ 不需要手动清理 CDN 缓存 一、核心问题在使用 CDN 时经常会遇到修改了 JS / CSS页面却仍然加载旧内容每次都要手动Purge CDN 缓存 本质原因静态资源 URL 没变但内容变了 二、核心解决方案关键原则✅ 原则一句话只要资源内容变URL 必须变 三、正确做法静态资源版本化Hash❌ 错误方式/static/js/app.js /static/css/main.css更新内容后 URL 不变 → CDN 继续用旧缓存 ❌✅ 正确方式/static/js/app.a1b2c3.js/static/css/main.d4e5f6.css 文件名带 hash指纹 发布效果版本文件v1app.a1.jsv2app.b2.js CDN 自动识别为新文件无需 purge ✅ 四、Django 正确配置1️⃣ 开启 ManifestStaticFilesStorageDjango 4 推荐写法STORAGES {staticfiles: {BACKEND: django.contrib.staticfiles.storage.ManifestStaticFilesStorage,},}2️⃣ 执行 collectstaticpython manage.py collectstatic3️⃣ 模板写法无需改动{% load static %}script src{% static js/app.js %}/script 自动变成/static/js/app.8f3a1c2d.js⚙️ 五、Nginx 缓存策略✅ 静态资源强缓存location /static {alias /path/to/static;expires 1y;add_header Cache-Control public, max-age31536000, immutable;} 特点浏览器 CDN 强缓存一年内不会重复请求immutable 表示永远不变因为文件名已变✅ HTML 页面不缓存location / {add_header Cache-Control no-cache, must-revalidate;} 原因HTML 决定加载哪个 JS 文件 六、CDNCloudflare配置建议❌ 不要做的事Cache Everything对 HTML否则HTML 被缓存仍引用旧 JS失去 hash 的意义✅ 推荐策略类型策略HTMLno-cache/static/*长缓存API不缓存 七、完整请求流程用户访问页面↓获取最新 HTML不缓存↓HTML 引用新的 JS/CSS带 hash↓CDN 发现新 URL → 拉新资源↓缓存一年⚠️ 八、常见错误总结❌ 错误 1静态文件名不变app.js 内容变了但名字没变 CDN 不更新❌ 错误 2HTML 被 CDN 缓存 即使 JS 更新页面仍引用旧文件❌ 错误 3手动覆盖旧文件重新上传 app.js 永远需要 purge ❌ 九、如何判断是否配置正确看资源 URL/static/js/app.xxxxx.js 有 hash → 正确 ✅ 没 hash → 有问题 ❌看响应头Cache-Control: public, max-age31536000, immutable 正确 十、最佳实践总结必须做到✅ 静态资源带 hash✅ HTML 不缓存✅ CDN 不缓存 HTML✅ 静态资源长缓存结果✔ 不需要手动清 CDN✔ 页面自动更新✔ 加载速度极快✔ 全球加速生效 十一、进阶优化建议可以进一步优化启用 gzip / brotli减少 JS chunk 数量使用 HTTP/2 / HTTP/3静态资源走 CDN 边缘节点 十二、最终结论❗ CDN 缓存问题 ≠ CDN问题❗ 本质是“资源命名策略问题”一句话总结内容变 → 文件名变 → CDN 自动更新 适用场景Django NginxVue / React / ViteCloudflare / 阿里云 CDN / AWS CloudFront