一直感觉我的首页加载慢 🤔，之前说过 Pages 是不支持 Next 中 Image 标签的优化的，就折腾了下 Cloudflare 的 Image 服务。
前面以为无论用多少都是有 $5 的低消，仔细看才发现可以不买存储包，直接用转换服务。
价格：
- 重设大小 - 免费 5w 请求/月
- 唯一转换 - 每 2000 个 $1，30天计一次
直接根目录新建一个 imageLoader.js，代码如图。
解释一下，Cloudflare 后台要针对域名开通 Image 服务，所以本地是不生效的，索性就直接写死线上域名😅。
其实魔法就在 /cdn-cgi/image/params/imageUrl 这一段，是 cf 图像服务的路径，当然域名要托管在 cf 上。
next.config.mjs 添加下面两行。
这样设置就对所有 Image 标签应用了自定义 loader。
当然如果只想要特定标签使用，就把上面的 imageLoader.js 改成 ts，放到项目中引用，像这样，注意 fill 配合 sizes 使用就行，语法类似 Tailwind 的 mobile first 原则，默认是 200px，然后根据 break point 匹配。
以我列表页的产品缩略图为例，原图 200KB 以上的应用后可以达到 20KB 以内，大小直接干掉 90%~
优化前后测了下，LCP 也提升了不少 😜
最后附赠一个小 Tip：
CF Image 服务跟网站里面自带的基础功能 Hotlink 保护有不兼容的地方，所以不要同时用。
以上！希望对你有帮助😉~
前面以为无论用多少都是有 $5 的低消，仔细看才发现可以不买存储包，直接用转换服务。
价格：
- 重设大小 - 免费 5w 请求/月
- 唯一转换 - 每 2000 个 $1，30天计一次
直接根目录新建一个 imageLoader.js，代码如图。
解释一下，Cloudflare 后台要针对域名开通 Image 服务，所以本地是不生效的，索性就直接写死线上域名😅。
其实魔法就在 /cdn-cgi/image/params/imageUrl 这一段，是 cf 图像服务的路径，当然域名要托管在 cf 上。
next.config.mjs 添加下面两行。
这样设置就对所有 Image 标签应用了自定义 loader。
当然如果只想要特定标签使用，就把上面的 imageLoader.js 改成 ts，放到项目中引用，像这样，注意 fill 配合 sizes 使用就行，语法类似 Tailwind 的 mobile first 原则，默认是 200px，然后根据 break point 匹配。
以我列表页的产品缩略图为例，原图 200KB 以上的应用后可以达到 20KB 以内，大小直接干掉 90%~
优化前后测了下，LCP 也提升了不少 😜
最后附赠一个小 Tip：
CF Image 服务跟网站里面自带的基础功能 Hotlink 保护有不兼容的地方，所以不要同时用。
以上！希望对你有帮助😉~
