Comments (15)
Same issue here with nextjs 10.0.8
for a fresh project.
from fab.
Right so this is a case we're not handing well, but I'm surprised we're handing it that badly...
Just out of interest, can you run tree -sa .next/serverless
(brew install tree if you're on a mac) and paste the result:
It should look like:
.next/serverless
├── [ 4078] init-server.js.js
├── [ 4078] on-error-server.js.js
├── [ 288] pages
│ ├── [ 3117] 404.html
│ ├── [ 3103] 500.html
│ ├── [ 1018934] _error.js
│ ├── [ 128] api
│ │ ├── [ 633420] hello.js
│ │ └── [ 633580] time.js
│ ├── [ 96] background
│ │ └── [ 1021815] [size].js
│ ├── [ 1024079] dynamic.js
│ └── [ 3842] index.html
└── [ 251] pages-manifest.json
from fab.
I've removed most of the pages for speed/readability and it still generates a 9.13MB server.js. The most interesting thing here I think is the size of the serverless _error.js
. It bloats to about 7MB when all of the other pages get included, largely to do with next/dynamic
loading I think.
frontend/.next/serverless
├── [ 21687] init-server.js.js
├── [ 21687] on-error-server.js.js
├── [ 352] pages
│ ├── [ 3978] 404.html
│ ├── [ 4011] 500.html
│ ├── [ 3240598] _error.js
│ ├── [ 11480] index.html
│ ├── [ 12568] pricing.html
│ ├── [ 21035] privacy-policy.html
│ ├── [ 13061] signup.html
│ ├── [ 14900] support.html
│ └── [ 27786] terms-of-service.html
├── [ 299] pages-manifest.json
└── [ 21] version.json
from fab.
correct me if I'm wrong, but I don't see any dynamic routes? Can you run a next export
and use @fab/input-static
instead on the out
dir?
from fab.
Including dynamic routes (9.24MB):
frontend/.next/serverless
├── [ 21689] init-server.js.js
├── [ 21689] on-error-server.js.js
├── [ 480] pages
│ ├── [ 4270] 404.html
│ ├── [ 4303] 500.html
│ ├── [ 3320244] _error.js
│ ├── [ 96] confirm-email
│ │ └── [ 3637] [token].html
│ ├── [ 96] error-pages
│ │ └── [ 6801] maintenance.html
│ ├── [ 10214] index.html
│ ├── [ 13211] pricing.html
│ ├── [ 20292] privacy-policy.html
│ ├── [ 96] reset-password
│ │ └── [ 96] [uid]
│ │ └── [ 3666] [token].html
│ ├── [ 12488] reset-password.html
│ ├── [ 13215] signup.html
│ ├── [ 14157] support.html
│ └── [ 27036] terms-of-service.html
├── [ 559] pages-manifest.json
└── [ 21] version.json
@fab/input-static
produces a server.js
of 386KB.
/server.js (386 kB)
[Generator] Done in 0.04 seconds.
[Generator] Zipping it up into a FAB:
[Generator] Created fab.zip (1.84 MB) in 0.18 seconds
from fab.
Wow ok. Do me one more test?
Delete all the .js
files in your .next/serverless/pages
dir (it's only _error.js
, right?) and run fab build --skip-cache
. Do you end up with something nearer the 386kb range?
(you can leave the dynamic routes there, I don't think they're the cause of the bloat)
from fab.
Still off by a factor of 10, sadly: /server.js (2.85 MB)
from fab.
Ok! I will investigate, thanks. (currently looking at what bloats the JS case so will circle back to this)
from fab.
Can you please test something for me?
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?
from fab.
Original build:
drwxr-xr-x 15 vitaly staff 480 Mar 17 18:10 _assets
-rw-r--r-- 1 vitaly staff 16928784 Mar 17 18:10 server.js
Updated packages dont build for me:
[Compiler] Compiling your server.js:
Circular dependency: node_modules/rollup-plugin-node-builtins/src/es6/readable-stream/duplex.js -> node_modules/rollup-plugin-node-builtins/src/es6/readable-stream/readable.js -> node_modules/rollup-plugin-node-builtins/src/es6/readable-stream/duplex.js
Circular dependency: node_modules/rollup-plugin-node-builtins/src/es6/readable-stream/duplex.js -> node_modules/rollup-plugin-node-builtins/src/es6/readable-stream/writable.js -> node_modules/rollup-plugin-node-builtins/src/es6/readable-stream/duplex.js
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
No name was provided for external module 'console' in output.globals – guessing 'console$1'
No name was provided for external module 'assert' in output.globals – guessing 'assert'
No name was provided for external module 'domain' in output.globals – guessing 'domain$1'
Creating a browser bundle that depends on Node.js built-in modules ('console', 'assert' and 'domain'). You might need to include https://www.npmjs.com/package/rollup-plugin-node-builtins
Build failed!
Errors encountered during Rollup build:
- Could not find module 'console' during build of 'frontend/.fab/.cache/generated-nextjs-renderers.81481bc.js'
- Could not find module 'assert' during build of 'frontend/.fab/.cache/generated-nextjs-renderers.81481bc.js'
- Could not find module 'domain' during build of 'frontend/.fab/.cache/generated-nextjs-renderers.81481bc.js'
- Could not find module 'console' during build of 'console?commonjs-external'
- Could not find module 'assert' during build of 'assert?commonjs-external'
- Could not find module 'domain' during build of 'domain?commonjs-external'
from fab.
Also, I couldn't run the dev server on the original. (webpack5)
[Server] 💎 fab serve 💎
[Server] Reading fab.zip…
[Server] ✔ Done. Booting VM…
Failed to load env from .env.local TypeError: e.info is not a function
at processEnv (evalmachine.<anonymous>:74604:25)
at Module.rGIR (evalmachine.<anonymous>:90004:9)
at __webpack_require__ (evalmachine.<anonymous>:46557:29)
at Object.1 (evalmachine.<anonymous>:49627:26)
at __webpack_require__ (evalmachine.<anonymous>:46557:29)
at evalmachine.<anonymous>:46614:20
at Object.<anonymous> (evalmachine.<anonymous>:46616:7)
at Object.<anonymous> (evalmachine.<anonymous>:97992:34)
at __webpack_require__ (evalmachine.<anonymous>:11646:34)
at Object.<anonymous> (evalmachine.<anonymous>:46533:27)
TypeError: commonjsGlobal.process.cwd is not a function
error Command failed with exit code 1.
from fab.
Damn, ok. Could you share your code with me somehow? Join the discord and DM me? https://discord.gg/Qvj3pJY
from fab.
@geelen I tested the above commands using a fresh Next.js project:
Before your commits:
After your commits without minifying:
After your commit with minifying:
from fab.
Interesting, what fresh Next project template did you use? I didn't see __dirname
in my testing at all
from fab.
@geelen can reproduce with:
$ npx create-next-app
$ cd example-app
$ npx fab init
$ npm run build:fab
...
[Generator] Created fab.zip (1.6 MB) in 0.21 seconds
from fab.
Related Issues (20)
- Nextjs userbase auth , fab deployment error
- Build issue: Node's own modules are being transpiled, which results in a broken build HOT 3
- Next.js build failing with final_responder plugin error HOT 4
- Preact bundling error HOT 1
- after first load not work nextjs api on cloudflare workers HOT 2
- How to rewrite assets for a relative path with CRA? HOT 2
- FAB Next.js build doesn't respect Next Build Configuration HOT 5
- Difference in behaviour locally vs AWS for server side relative redirects to public files
- Yarn Berry - missing transitive deps on init HOT 1
- Docs for how to monitor the resulting production app
- Issue with serve for a Nextjs project HOT 1
- webpack-bundle-analyzer to debug FAB size? HOT 7
- Flareact Consideration HOT 2
- Typescript Error for resolve() HOT 1
- TypeScript: Support for typechecking the `settings` object HOT 1
- Can we make HERE_NO_EVAL CF specific?
- Set-Cookie not respected in redirects HOT 4
- next12 HOT 1
- Is this project dead?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fab.