原想使用该功能是加速网站的图片,但结果是不理想。

安装

https://github.com/miaogaolin/cf-image-proxy 下载该项目

account_id = "bb9693ef4db8082e0c871ff851012363"
webpack_config = "webpack.config.js"
type = "javascript"
workers_dev = true

[env.production]
name = "image"
route = "laomiao.site/*"
zone_id = "bc5a62035d150b36f3641acecc4f793c"
account_id = "bb9693ef4db8082e0c871ff851012363"

修改 wrangler.toml 文件内容。

运行:

npm install
npm run build
npm install -g @cloudflare/wrangler
wrangler publish --env production -c wrangler.toml

URL 例子:

image.laomiao.workers.dev/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F3cdc5ae3-12a2-4c0c-83fa-0dce8b4e5b3c%252Fphoto-1493612276216-ee3925520721.webp%3Ftable%3Dblock%26id%3D264a87f9-0dc0-4edc-b800-e9260d1d0a61%26cache%3Dv2

应用

CF 部署后,然后给我的 LaoMiao.site 网站应用,我的网站采用该项目搭建 https://github.com/transitive-bullshit/nextjs-notion-starter-kit。

打开根目录下 site.config.js 文件,修改如下图的配置:

图片 CDN

图片 CDN

我的配置是:

imageCDNHost: "<https://image.laomiao.workers.dev>"

<aside> 💡 该域名请使用自己的配置,不要使用我这个,因为不知掉哪一天就无法使用了

</aside>

速度对比

工具前往