webpack-bundle-analyzer to debug FAB size?

[wizzard0]

Right now an empty Next 10.0.0.8 project with target:serverless ends up with 7.3M server.js which fails upload.

For optimizing client JS size I found https://www.npmjs.com/package/webpack-bundle-analyzer to be very helpful.

Any chance of something similar for FAB?

[wizzard0]

https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer shows SOME of the modules involved (i.e. removing iconv-lite indeed shrank the bundle) but for some reason it covers only 1.5M instead of 7M

[geelen]

@wizzard0 working on a new version, seeing sizes now ~1.7mb unminified, 800-900k minified. Can you let me know if it's compatible? Instructions:

yarn build:fab && ls -l .fab/build

Note existing size of server.js

yarn add https://pkg.csb.dev/fab-spec/fab/commit/b34a9815/@fab/actions https://pkg.csb.dev/fab-spec/fab/commit/b34a9815/@fab/core https://pkg.csb.dev/fab-spec/fab/commit/b34a9815/@fab/input-nextjs
yarn build:fab && ls -l .fab/build

Did a) build succeed and b) how big is server.js now?

If it did build, does fab serve run it OK? Any routes now throw exceptions?

yarn fab build --minify && ls -l .fab/build

What's the final minified size?

[wizzard0]

oops, for once I decided to give up on next and removed the repo, so no longer have the folder which produced 7M server.js :/

with another repo, I get 4.41M server.js > 2.36M after update > 1.2M with minification, but

a) succeeds
b) fab serve 'command fab not found'; npx fab serve:

  [Server] 💎 fab serve 💎
        [Server] Reading fab.zip…
        [Server] ✔ Done. Booting VM…
    ReferenceError: __dirname is not defined
npm ERR! code 1
npm ERR! path /mnt/c/dev/2021/P12/p1205-nextjs-fab-universal-pouch/p1205-fab-universal-pouch
npm ERR! command failed
npm ERR! command sh -c fab "serve"

So it does not start at all.

Also would appreciate equivalent npm lines because maybe it's because I use npm everywhere else and maybe messed up smth with mixing yarn\npm commands

[wizzard0]

Oh. Found that repository.

1. 7 > 2.05 > 1.08M, even better %)
2. Linc preview works
3. fab serve works
4. Linc CF deploy fails with ❤️{"result":null,"success":false,"errors":[{"code":10021,"message":"Uncaught ReferenceError: module is not defined\n at line 14049\n at line 6\n at line 7\n"}],"messages":[]}❤️

Command-line deploy with fab deploy fails the same way.

[wizzard0]

Generated server.js (unminified) looks a bit weird

Is it really OK to concatenate modules this way?

UPD: BTW fab.zip has wrong CRCs making extracting files a bit difficult (but possible)

[wizzard0]

Commented out module.exports lines, got:

Error uploading the script, got response:
{"result":null,"success":false,"errors":[{"code":10021,"message":"Uncaught EvalError: Code generation from strings disallowed for this context\n  at line 45148 in wrapfunction\n  at line 45742 in populateConstructorExports\n  at line 45508\n  at line 30 in createCommonjsModule\n  at line 45486\n  at line 6\n  at line 7\n"}],"messages":[]}

edit: the culprit is here:

wow. after commenting that one out too, it deploys! and dynamic routes work!

how do I monkey-patch this?:)

[wizzard0]

it's been a while... any updates?