🎉

Cloudflare Pages Functions でバンドルサイズが 1MiB に達しているか調べる方法

2024/08/17に公開

Prisma

概要

npm create cloudflare@latest を使っている人向け。
生成したプロジェクトをデプロイする時にWorker exceeded the upload size limitというエラーが出たら、

$ npx wrangler deploy functions/\\[\\[path\\]\\].ts --dry-run

もしくは

$ npx wrangler pages functions build
$ gzip ./_worker.bundle
$ du -h ./_worker.bundle.gz

などとやって、圧縮済みバンドルファイルの容量を調べましょう。
Workers Paid/Free Plan で制限される 10MiB/1MiB は上記の容量が参照されます。

モチベーション

Remix + Prisma を試したかった。
とりあえずnpm create cloudflare@latest --framework remixにprismaを追加しただけのほとんど初期状態のプロジェクトを作りまして。
remix vite:buildして、

...
build/client/assets/entry.client-Bm428nsz.js    4.06 kB │ gzip:  1.54 kB
build/client/assets/components-DRRrOH0M.js    252.51 kB │ gzip: 81.15 kB
✓ built in 1.36s

よしよしトータルで 1MiB を下回ったぞと思ったのに。
wrangler pages deployすると、

✘ [ERROR] Deployment failed!

  Failed to publish your Function. Got error: Your Worker exceeded the size limit of 1 MiB. Refer to
  the Workers documentation
  (https://developers.cloudflare.com/workers/observability/errors/#errors-on-worker-upload) for more
  details.

制限に達しているよとエラーが出て完了しない。
これは困った。

前提

Pages -> 静的ファイルをホストして配信
Workers -> サーバーレス関数の実行
Pages Functions -> Pages の機能の 1 つで、静的ファイルだけでは実現できないサーバー処理（e.g. SSR）を Workers 上で動かしてくれるやつ

調査

そもそもの発端はprismaを利用すると制限に引っかかってしまうことでした。
素直にターミナルに出てきたページに飛ぶと、

A Worker can be up to 10 MB in size after compression on the Workers Paid plan, and up to 1 MB on the Workers Free plan.

と書いてありましたが、いまいち容量が何を指しているのか分からず。
cloudflare workers how to check bundle size とかで適当にぐぐってみると公式ドキュメントの以下の記述にたどり着きました。

You can assess the size of your Worker bundle after compression by performing a dry-run with wrangler and reviewing the final compressed (gzip) size output by wrangler:

$ wrangler deploy --outdir bundled/ --dry-run

# Output will resemble the below:
Total Upload: 259.61 KiB / gzip: 47.23 KiB

ふむふむなるほど。
create-cloudflare 経由で作成したプロジェクトでは、Functionsのエントリーポイントがfunctions/[[path]].tsにあったので、次で実行できた。

$ npx wrangler deploy functions/\[\[path\]\].ts --dry-run
 ⛅️ wrangler 3.72.0
-------------------

▲ [WARNING] The entrypoint functions/[[path]].ts has exports like an ES Module, but hasn't defined a default export like a module worker normally would. Building the worker using "service-worker" format...


Total Upload: 4202.49 KiB / gzip: 1151.39 KiB

gzip の箇所が圧縮後の容量なので、1151.39 KiB が私のデプロイしたい容量らしい。
ちゃんと制限を超えてました。

ここまで分かればだいたい終わり。

とりあえずprismaがデカイという話はネットでなんとなく聞きかじっていたので、これを消して試してみる。

$ npm uninstall prisma
$ npx remix vite:build
$ npx wrangler deploy functions/\[\[path\]\].ts --dry-run

 ⛅️ wrangler 3.72.0
-------------------

▲ [WARNING] The entrypoint functions/[[path]].ts has exports like an ES Module, but hasn't defined a default export like a module worker normally would. Building the worker using "service-worker" format...


Total Upload: 2023.81 KiB / gzip: 332.19 KiB

yay 🎉

概要

モチベーション

前提

調査

Discussion