search

fab-spec / fab

💎 FAB project specification & monorepo
https://fab.dev
MIT License
579 stars 37 forks source link

Next + Cloudflare Workers Script Too Large #254

Closed alaister closed 3 years ago

alaister commented 3 years ago

Hello, I am new to Fab and trying to deploy a stock Next.js site to Cloudflare workers. However I am getting a workers.api.error.script_too_large error when deploying.

From what I can tell the server.js file is not being minified. Is this supposed to happen automatically or have I missed something in the configuration?

Thanks for the help.

geelen commented 3 years ago

Hi there, we're not currently minifying the script post-compilation, no. So far it hasn't been the deciding factor in whether a script is too large or not, but it's probably time to add a configuration flag to turn it on.

Out of interest, can you have a look in your .fab/build directory and tell me how big the server.js file is? And if you manually minify it (I think terser is the only decent one these days?), how much of a difference it makes? Because of the way the FAB NextJS compiler works, some of the major chunks may already be minified, so it might not have a big impact...

Also, are you on a paid CF Workers plan? I don't... think there's any difference in the limits, but I believe in the future there might be.

alaister commented 3 years ago

Hi Glen, Before minification server.js is 4.6MB and post minification it becomes 2.1MB. --compress --mangle were the options I used. The deploy succeeds after I minify the file.

I'm not sure why the server.js file is so big to begin with - I am using a completely stock Next.js app with nothing added.

I am on the paid CF Workers plan.

Thanks!

geelen commented 3 years ago

Whoa that's... bigger than I thought. Ok, I'm adding a minify flag for now so you can keep going, but I have a couple of NextJS things to look into that are bubbling to the top of my list anyway, so will loop this in too.

geelen commented 3 years ago

Hey, wanna try something for me? I've got a problem with my local environment so I've pushed some code without testing it but... I think you should be able to give it a go:

yarn add https://pkg.csb.dev/fab-spec/fab/commit/3452018e/@fab/actions https://pkg.csb.dev/fab-spec/fab/commit/3452018e/@fab/cli
fab build --minify

Could you let me know if that works as expected? I just realised CodeSandbox has been "publishing" every commit all the time and I could maybe make better use of that...

alaister commented 3 years ago

Sure, I appreciate you working on this so quickly!

From what I can tell, those packages install correctly. However my server.js file in .fab/build has not been minified at all.

Let me know if you want any more help working on this!

iand675 commented 3 years ago

Hi, I'm dealing with similar issues. Spoke with @evanderkoogh earlier today and he asked me to file a ticket, but this seems to effectively be the same problem. For reference, my server.js file is 7.3MB.

geelen commented 3 years ago

Alright, I've added the minify option properly, it should be available under:

yarn add https://pkg.csb.dev/fab-spec/fab/commit/b68a4a33/@fab/actions https://pkg.csb.dev/fab-spec/fab/commit/b68a4a33/@fab/cli
fab build --minify

Now looking at why NextJS got so chonky recently. Lockdown's been tough on us all, I suppose...

alaister commented 3 years ago

Thanks - seems to be working!

geelen commented 3 years ago

Actually going to reopen this because the overall script size is still a little worrying.

I've started work on a fix in #259 and have found one bug and fixed it, but codesandbox isn't actually auto-publishing versions of @fab/input-nextjs so will do that and update here when there's a new release worth testing...

geelen commented 3 years ago

Looks like you should be able to do yarn add https://pkg.csb.dev/fab-spec/fab/commit/d541aa94/@fab/input-nextjs and rebuild. I don't think it'll be any smaller but there was definitely some weird behaviour there that I've fixed, so it'd be good to double-check that everything still works.

geelen commented 3 years ago

Btw if this becomes a real issue for anyone (i.e. minification not sufficient) ping me directly on Discord (geelen#7503) as there's something I can do to try to help you out. For the moment I'll close this and release the new minification stuff in the next day or two.

cj commented 3 years ago

@geelen I just did a complete fresh install of nextjs and fab, nothing added to it and I get the workers.api.error.script_too_large with version 1.0.0-rc.8

geelen commented 3 years ago

Hi @cj, can you confirm whether using the --minify flag on fab build produces a working result? I've got some time tomorrow to dig into what might be going on here but for now I might just release a new version of fab init that adds that by default for NextJS projects.

For reference, you probably want to change this in your package.json:

- "fab:build': "fab build",
+ "fab:build': "fab build --minify",
cj commented 3 years ago

@geelen yes, I was using --minify and NODE_ENV=production, here is the output:

> ****@0.1.0 fab:build /Users/cj/Documents/apps/examples/****
> NODE_ENV=production fab build --minify

       [Builder] 💎 fab build 💎
       [Builder] Reading plugins from config.
       [Builder] Found the following build-time plugins:
                   @fab/input-nextjs
                   @fab/plugin-render-html
                   @fab/plugin-rewire-assets
       [Builder] and the following runtime plugins:
                   node_modules/@fab/input-nextjs/runtime.js
                   node_modules/@fab/plugin-render-html/runtime.js
                   node_modules/@fab/plugin-rewire-assets/runtime.js
       [Builder] Proceeding with build phase.
       [Builder] Building @fab/input-nextjs:
[@fab/input-ne…] Reading files from /Users/cj/Documents/apps/examples/****/.next
[…/input-nextjs] Finding all static HTML pages…
[…/input-nextjs] ✔ Found 2 static html pages.
[…/input-nextjs] Finding all dynamic NextJS entry points
[…/input-nextjs] Found 2 dynamic pages.
[…/input-nextjs] ✔ Wrote /Users/cj/Documents/apps/examples/****/.fab/.cache/generated-nextjs-renderers.1de657e.js
[…/input-nextjs] Finding all static assets
[…/input-nextjs] ✔ Found 12 assets.
[…/input-nextjs] Finding all public files
[…/input-nextjs]   ✔ favicon.ico
[…/input-nextjs]   ✔ vercel.svg
       [Builder] Building @fab/plugin-render-html:
[@fab/plugin-r…] Compiled 2 html files.
[…n-render-html] No fallback injected.
       [Builder] Building @fab/plugin-rewire-assets:
[@fab/plugin-r…] Inlining 7 assets.
[…rewire-assets] ✔ Done.
[…rewire-assets] Generating server code to rewire 7 assets.
[…rewire-assets] ✔ Done.
       [Builder] Build plugins completed in 2.14 seconds.
     [Typecheck] No Typescript plugins detected. Skipping.
      [Compiler] Compiling your server.js:
      [Compiler] Done in 4.26 seconds.
     [Generator] Writing all files to .fab/build
                     /_assets/_html/404.html.da7ab4994.json (3.14 kB)
                     /_assets/_html/index.html.63e020988.json (3.98 kB)
                     /_assets/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.e48df4f42fa5987f981d.js (34.4 kB)
                     /_assets/_next/static/chunks/framework.9116e7bff2bfccdffa19.js (130 kB)
                     /_assets/_next/static/chunks/main-7eab65f534a6c4802802.js (21.3 kB)
                     /_assets/_next/static/chunks/polyfills-36bde18dcfde0c144be5.js (92.3 kB)
                     /_assets/_next/static/chunks/pages/_error-ed1b06dc12d6382f8fbd.js (9.66 kB)
                     /_assets/_next/static/chunks/pages/index-790a1bddfa45d847527f.js (9.76 kB)
                     /_assets/favicon.21b739d43.ico (15.1 kB)
                     /server.js (4.27 MB)
     [Generator] Done in 0.16 seconds.
     [Generator] Zipping it up into a FAB:
     [Generator] Created fab.zip (1.18 MB) in 0.19 seconds
✨  Done in 17.59s.

**** on  master    is  v0.1.0 via  v14.5.0 took 18s
➜ dotenv-load yarn fab deploy fab.zip
yarn run v1.22.4
$ /Users/cj/Documents/apps/examples/****/node_modules/.bin/fab deploy fab.zip
[Deployer] 💎 fab deployer 💎

[Deployer] Deploying server with cf-workers.
[Deployer] Use the --server-host argument to override this.

[Deployer] Deploying assets with cf-workers.
[Deployer] Use the --assets-host argument to override this.

[Deployer] Creating package directory .fab/deploy:
[Deployer] ✔ Done.
[@fab/deployer…] Starting assets deploy…
[…er-cf-workers] ✔ Config valid, checking API token…
[…er-cf-workers] ✔ Generated working dir in .fab/deploy/cf-workers-41dCk39cLLa-MVRZJ3Fn6.
[…er-cf-workers] ✔ Unpacked FAB.
[…er-cf-workers] Uploading assets to KV store…
[…er-cf-workers] Checking API token…
[…er-cf-workers] ✔ API token OK. Checking KV access…
[…er-cf-workers] ✔ KV access confirmed.
[…er-cf-workers] ✔ Reusing existing KV namespace FAB assets (****).
[…er-cf-workers] Uploading files…
[…er-cf-workers] ✔ Done.
                   _assets/_html/404.html.da7ab4994.json (3.14 kB)
                   _assets/favicon.21b739d43.ico (15.1 kB)
                   _assets/_next/static/chunks/pages/index-790a1bddfa45d847527f.js (9.76 kB)
                   _assets/_html/index.html.63e020988.json (3.98 kB)
                   _assets/_next/static/chunks/pages/_error-ed1b06dc12d6382f8fbd.js (9.66 kB)
                   _assets/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.e48df4f42fa5987f981d.js (34.4 kB)
                   _assets/_next/static/chunks/main-7eab65f534a6c4802802.js (21.3 kB)
                   _assets/_next/static/chunks/polyfills-36bde18dcfde0c144be5.js (92.3 kB)
                   _assets/_next/static/chunks/framework.9116e7bff2bfccdffa19.js (130 kB)
[…er-cf-workers] Starting server deploy…
[…er-cf-workers] ✔ Config valid.
[…er-cf-workers] Compiling package to: .fab/deploy/cf-workers.js:
[…er-cf-workers] ✔ Generated working dir in .fab/deploy/cf-workers-OBD5hYn2EUsLbzP0Ruxoj.
[…er-cf-workers] ✔ Unpacked FAB.
[…er-cf-workers] ✔ Generated worker file.
[…er-cf-workers] ✔ Wrote .fab/deploy/cf-workers.js in 0.18 seconds.
[…er-cf-workers] ✔ Reusing existing KV namespace FAB cache (****).
[…er-cf-workers] Uploading script…
Fab deploy failed!

Error uploading the script, got response:
{"result":null,"success":false,"errors":[{"code":10027,"message":"workers.api.error.script_too_large"}],"messages":[]}
    Error: Fab deploy failed!
    Error uploading the script, got response:
        {"result":null,"success":false,"errors":[{"code":10027,"message":"work
    ers.api.error.script_too_large"}],"messages":[]}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
geelen commented 3 years ago

Hmm, damn. That's still reporting a 4.27MB server file. Which means, I think, the minification isn't working.

Could well be a bug in rc8, but could you, just for my benefit, check the package.json in node_modules/@fab/actions and node_modules/@fab/cli, make sure you're on the right version?

meotimdihia commented 3 years ago

About my build, I checked it on the right version. And the build is still too large to deploy to Cloudflare. My website is not too complicated, it just has 4 pages, include algolia search + graphql...

iFwu commented 3 years ago

Maybe we should seek some alternatives for Next. Already minified and the server.js still has 2MB. I'm looking into https://github.com/alephjs/aleph.js and https://flareact.com/

bashirsouid commented 3 years ago

So I guess this is still an issue... I just discovered this project (it sounds really great!) but I actually can't do the Getting Started Guide with NextJS with zero modifications and deploy to Cloudflare.

The minify flag reduced from 1.7MB to 1.3MB but still not under and I haven't even made modifications yet.

Kinda a bummer because NextJS seems like a great full featured project. Maybe I should try something else? I am interested in FAB project + Cloudflare workers because it seems like a great combo for super low latency sites.

Edit: Oh, I see #259 I didnt see it earlier :ok_hand:

osdiab commented 3 years ago

maybe some way to support https://github.com/danvk/source-map-explorer in the fab output could be useful for debugging why size is too big?

geelen commented 3 years ago

Actually doing a bundle exploration might be a good next step, but it's a little tricky because nextjs is getting compiled three times, first as part of the next build (ncc, i think), then webpack (input-nextjs) and then rollup (fab compile). Persisting the source maps through all of those is going to be challenging.

I do wonder how easy it is to take a flareact approach and go for source-file compatibility rather than targeting built NextJS output. That's not something I've really looked too deeply at since I was worried about the maintenance story. Shimming out the Node libraries for Next does work it just bloats the file size enormously.

Might be worth a bit of exploration...

bashirsouid commented 3 years ago

Hmm yeah, maybe. For what it's worth I tried a simple static hello world in Flareact and latency was a little slower than a static compiled NextJs project... Not much though because both are decently fast either way... they did note in the project docs that it is missing the years and years of NextJs optimizations they were able to do over time.