How can I view the `wrangler pages deploy` build output, or check the size limit being hit?
When I do
wrangler pages deploy ... I get a generic "This deployment failed" error. I'm pretty sure I've hit the build size limit (using _worker.js for SSR, so it's girthy), but I don't know for sure how large the build is or what's in it. Is there a way to get wrangler to output the build somewhere I can poke around, or see the actual size of the build?6 Replies
When you deploy with
wrangler you don't get to see the log output for the error. When you hook the project up to git and deploy that way, you can see the error causing it to fail.
I just helped someone in another thread who was having an issue because they were importing @react-mail/components which included a 6MB tailwind.js file.
I haven't used _worker.js for SSR before, but first thing would likely be getting the error output.Hooking it up to git is too awkward for what I'm doing I think (pnpm w/ a monorepo and lots of intermediate build steps), buuut as a workaround I ended up using
tsup to compile the worker into a single file then wrangler pages deploy ... --no-bundle to deploy. From there I could use normal build analyzer tools to see what took up the most space in the build output.
But even after cutting everything semi-optional I could find from the build it still came out too big. The _worker.js contains basically the entire site for SSR - I thought maybe splitting each page into its own function would be under the limit (assuming each function gets a separate 1mb limit), but the framework I'm using doesn't have a way to do that and ehh at that point it'd be compromise after compromise just to get it working. I'm just going to abandon the idea and go back to docker and deploying on my own servers - as cool as pages+workers are it's just too tediousHow big is your bundle overall? Really far from 1 MiB?
(assuming each function gets a separate 1mb limit)It doesn't, it's 1 MiB gzip after bundle/combined on free
What are you using? Can you point me towards _worker.js?
is it just something like this? https://sascha.work/posts/ssr-using-cloudflare-pages/
sascha.work
SSR using Cloudflare Pages
SSR is now possible using Cloudflare Pages too. By adding a custom _worker.js file to the distribution directory, incoming HTTP requests may be intercepted and customized.
It was around 14mb at the start, I think I got to 3-4mb in the end by stripping out some semi-optional functionality but that was pretty tedious and it felt flakey.
The biggest problem was
monaco-editor which is dynamically imported by the client so during SSR it's optional, but the dynamic import is bundled at build time so I ended up using regex on the final build output to blindly replace import('monaco-editor') with something like () => {throw new Error('"monaco-editor" is unavailable in the worker build')} which would stop it being bundled. That and some other tweaks got close, buuut... that many tweaks, it would be difficult to maintain them. wrangler not rejecting builds over the size limit makes that a lot more dangerous, if its over the limit it takes the site down instead of just a build failing.
Realistically though, I should just pay for the paid plan. That and a few tweaks to get the size under and it should work fine, as long as the bundle doesn't push over 10mb in the future but checking if its over the limit manually before the build can succeed would fix that. I'd just rather not, so it's more my problem lol.
I'm using vike, so I mostly just cobbled it together from some other examples and the cloudflare docs. I was using _routes.json to avoid the worker being invoked for asset requests, then _worker.js was just calling vikes render function and handling some basic stuff like 404s, it was like 15 lines total. But when built it ends up including all the code for every page in the app, so.. pretty big in the end.