山维空间
·
Next.js 图片怎么这么贵？！——Cloudflare 原生 Image Resizing 避坑与最佳实践
内容提要
本文探讨了如何在使用 Next.js 和 Cloudflare 进行图片优化时降低成本。默认的图片优化缺乏缓存机制，导致每次请求都需重新处理图片。通过自定义加载器和 Cloudflare 的图片调整服务，可以有效降低带宽和计算费用，并改善缓存策略，从而提升用户体验。优化后的请求头显示缓存命中，显著减少了计算资源的消耗。
关键要点
-
Next.js 的 <Image> 组件提供了图片懒加载、响应式裁剪和格式优化，但默认的图片优化缺乏缓存机制。
-
Cloudflare 上的默认 Next.js 图片优化导致每次请求都需重新处理图片，造成高昂的账单。
-
通过对比 HTTP Header，发现默认优化没有 Cache-Control 和 cf-cache-status，导致浏览器和 CDN 无法缓存图片。
-
使用自定义加载器和 Cloudflare 的图片调整服务，可以有效改善缓存策略，降低带宽和计算费用。
-
优化后的请求头显示缓存命中，显著减少了计算资源的消耗，提升了用户体验。
-
开启 Cache Reserve 功能可以将命中的内容备份到廉价的 R2 对象存储中，避免无谓的重算。
延伸解读
图片优化的成本陷阱
在使用 Next.js 和 Cloudflare 进行图片优化时，默认的图片处理机制可能导致高昂的账单。由于缺乏有效的缓存策略，每次请求都需要重新处理图片，增加了带宽和计算费用。了解这一点可以帮助开发者在选择优化方案时避免不必要的支出。
自定义加载器的优势
通过使用自定义加载器和 Cloudflare 的图片调整服务，开发者可以显著改善缓存策略。这种方法不仅降低了计算成本，还提升了用户体验。特别是在流量增长的情况下，合理的缓存配置能够有效减少重复计算，节省资源。
开启 Cache Reserve 的重要性
Cache Reserve 功能可以将命中的内容备份到廉价的 R2 对象存储中，避免因缓存失效而导致的重复计算。这一策略对于希望长期保持图片优化效果的项目尤为重要，能够确保在高流量情况下依然保持低成本。
延伸问答
为什么使用 Next.js 默认的图片优化会导致高昂的账单？
因为默认的图片优化缺乏缓存机制，每次请求都需重新处理图片，导致带宽和计算费用增加。
如何通过 Cloudflare 改善 Next.js 图片优化的缓存策略？
可以使用自定义加载器和 Cloudflare 的图片调整服务，设置合适的缓存头来降低带宽和计算费用。
开启 Cache Reserve 功能有什么好处？
开启 Cache Reserve 后，命中的内容会备份到廉价的 R2 对象存储中，避免无谓的重算，降低成本。
如何配置自定义加载器以使用 Cloudflare 的图片调整服务？
在项目中创建 image-loader.ts 文件，定义加载器逻辑，并在 next.config.ts 中启用自定义加载器。
Cloudflare 的缓存机制如何影响图片请求的性能？
Cloudflare 的缓存机制可以显著提高图片请求的性能，通过缓存命中减少计算资源消耗。
如何确保生成的图片在 CDN 中长时间缓存？
可以将边缘缓存和浏览器缓存的 TTL 设置为一年，并开启 Cache Reserve 功能以防止缓存被淘汰。
