25MiB bundle size limit with CF Pages
Previously my Remix Vite app had a server bundle size of 1.7MiB and a client bundle size of 19MiB.
I discovered that a dependency of @blocknote/core drastically increased the size by 12MiB, so I marked it as build.rollupOptions.external in my vite.config.ts, then am loading the scripts in my React component.
However despite doing this I'm still getting the same error in Pages:
Generated Pages Functions bundle size (26348753) is over the limit of 25.0 MiB
Previously: 21MiB (1.7MiB server bundle, 19MiB client bundle)
Currently: 9MiB (1.7MiB server bundle, 7MiB client bundle)24 Replies
This first happened on Apr 5th and I noticed there was a Pages issue, I'm wondering if this is related
？
have any ideas or know why this could be happening? or perhaps you're expereincing the same thing?
Well, the reason why is this
Generated Pages Functions bundle size (26348753) is over the limit of 25.0 MiBAs to why your bundle is that big, we don't know - you'd need to look into that
I'm saying I reduced my bundle size down 12MiB, and it's still saying the same thing
so the current bundle size is ~9MiB
plus previously it wasn't at 25MiB either, coincedentally happened on Apr 5th too
https://www.cloudflarestatus.com/
Cloudflare Status
Welcome to Cloudflare's home for real-time and historical data on system performance.
that was unrelated
i'm not really sure what to say, i can't easily tell why your bundle is 25 mib but it is
is there a way to see what cloudflare pages is bundling?
currently I'm measuring with vite visualizer which is where I'm getting my bundle sizes from
you can bundle locally and see yeah
npx wrangler functions build
or whatever your framework build command is
depending how it's being builtI've been doing
npm run build which is just remix:vite build
do I do this? npx wrangler remix:vite build
also do I need wrangler version 4 to do this?
in the middle of troubleshooting right now I bumped into a dependency issue with remix-run with wrangler v4 so I just stayed on the latest wrangler v3no
no v3 is fine
you'll want to just run npm run build then
and there should be like a _worker.js folder
i assume
hmm my
npm run build creates a build/client and build/server folders
but I don't see a _worker.js folderi don't know how remix works
is there a functions folder?
i'd be surprised if so
yes there's a
functions/[[path.ts]]
which is setup with the remix cloudflare pages adapter, ie: @remix-run/cloudflare-pagesinteresting
then yeah try that
hmm I getting this
✘ [ERROR] Unknown arguments: functions, build
oh I think I run this? npx wrangler pages functions build
trying this but it doesn't seem to be picking up the wrangler.toml settings I have
err yeah pages
what do you mean it's not picking them up?
the build will fail from these errors
when you run that, there's a
_worker.bundle file
err, it should work but you can try adding --compat-date 2024-10-24 --compatibility-flags nodejs_compat manuallyok it built! checking out that _workers.bundle now - thank you!! 🙏
how can I get the bundle size from this 😅
oh it's just the file itself
hmm and it's still 26MB despite the changes I mentioned at the start, but atleast I have something to figure out here - thanks Walshy 🙏
is a worker bundle based on the vite bundle?
No
Vite is building whatever it's meant to build, seemingly that's the site assets
Wrangler is using esbuild to build and bundle the worker code
ah I see
and is there a way to control how it get's bundled?
change the code :p
it bundles like most things, it just bundles what it needs to
if your code is importing something big, it'll need to bundle it
hmm did some experimenting, it doesn't look like the workers_bundle is being minified
I see I can add a flag for --minify on the command I tried before
npx wrangler pages functions build --compatibility-date 2024-10-24 --compatibility-flags nodejs_compat --minify
and the _workers.bundle file drops to 16MiB which I'll take as. aquick fix for now
wrangler pages deploy ./build/client
this ^ is my npm run deploy which I'm assuming is what triggers that bundle size limit error
hmm, it's possible it's also remix vite:build running how it get's built
but I don't see a --minify option yet
I tried using minify in the wrangler.toml but got this - Configuration file for Pages projects does not support "minify"
can I combine wrangler pages functions build --minify with wrangler pages deployremix:vite build somehow?
or change my deploy pipeline (currently using dashboard) to use wrangler pages functions build --minify'
for context cloudflare pages build command is npm run build which is my remix vite:build command but I just need to use wrangler pages functions build --minify somehow
ah figured out how to get --minify to work
all fixed (for now)