#4490·NotionNext

[性能] 评估 Cloudflare 图片变换作为 Notion 图片反代的可选增强

Author: tangly1024Created Sep 1, 2026Updated Sep 1, 2026
Labelsdocumentationenhancementconfig

背景

用户反馈:对海外站点而言,图片可以进一步利用 Cloudflare 做优化;如果开启 CDN 图片优化,页面速度仍有提升空间。

这个方向和 NotionNext 现有图片方案相关,但需要区分:

  • 现有方案主要是 Notion 图片 URL 映射、宽度参数压缩、懒加载、以及可选 Cloudflare Worker 反代缓存。
  • Cloudflare Image Transformations / format=auto / quality / width 属于进一步的图片转码与压缩增强,可能涉及 Cloudflare 功能开关、计费、画质损失和缓存维度增加。

相关现有问题:#4473、#4476。相关代码/文档:

  • conf/image.config.js
  • lib/db/notion/mapImage.js
  • components/LazyImage.js
  • cloudflare/notion-image-proxy/worker.mjs
  • docs/user-guide/deploy/notion-image-proxy.md

当前现状

  • NEXT_PUBLIC_NOTION_HOST 可将 Notion 图片入口改成自有 CDN 域名。
  • mapImgUrl / compressImage 会给 Notion 图片追加 widthcache=v2
  • LazyImage 会按屏幕宽度调整 URL 中已有的 width / w 参数。
  • cloudflare/notion-image-proxy/worker.mjs 当前负责缓存、ETag、304,不负责 cf.image 转码压缩。

建议

作为可选增强,而不是默认启用:

  • 在文档中明确“Notion 图片反代缓存”和“Cloudflare 图片变换压缩”的区别。
  • 给站长说明开启 Cloudflare Image Transformations 的收益、成本和画质取舍。
  • 评估 Worker 是否可以增加可选配置,例如 format=autoqualityfit=scale-down、宽度白名单或最大宽度限制。
  • 避免对已经被 Notion/Unsplash 压缩过的图片重复有损压缩。
  • 保持默认方案低门槛,进阶优化由站长自行选择。

验收标准

  • 文档补充图片优化方案对性能、成本、画质的影响说明。
  • 文档明确该配置应由站长根据站点访问区域、图片数量、Cloudflare 套餐自行选择。
  • 如实现代码增强,必须默认关闭或保持兼容现有 Worker 行为。
  • 增加 Worker 测试,覆盖缓存头、转换参数和回退行为。
  • 给出 WebPageTest / Chrome Network / curl -I 的验证方法。

Source: notionnext-org/NotionNext