Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

12.0.9-canary.11 5x'd size of edge SSR bundle #34185

Closed
leo opened this issue Feb 10, 2022 · 7 comments
Closed

12.0.9-canary.11 5x'd size of edge SSR bundle #34185

leo opened this issue Feb 10, 2022 · 7 comments

Comments

@leo
Copy link
Contributor

leo commented Feb 10, 2022

Run next info (available from version 12.0.8 and up)

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:29:10 PST 2021; root:xnu-8019.61.5~1/RELEASE_ARM64_T8101
Binaries:
  Node: 16.14.0
  npm: 8.3.1
  Yarn: 1.22.17
  pnpm: 6.30.1
Relevant packages:
  next: 12.0.9-canary.11
  react: 18.0.0-rc.0-next-fe905f152-20220107
  react-dom: 18.0.0-rc.0-next-fe905f152-20220107

What version of Next.js are you using?

12.0.9-canary.11

What version of Node.js are you using?

16.14.0

What browser are you using?

Chrome (latest)

What operating system are you using?

macOS (latest)

How are you deploying your application?

Vercel

Describe the Bug

  • Version 12.0.9-canary.9 of Next.js comes with fairly small edge SSR bundles (∼ a few hundred KB in total).
  • Version 12.0.9-canary.10 doesn't exist on npm (FYI, just to clarify that there's no version in between).
  • Version 12.0.9-canary.11 made their size shoot up to over 1,3 MB (∼ x5) for just a single chunk.

Initially, I assumed this would be a problem in my own application, but after hours of investigation, I got to understand that version 12.0.9-canary.9 of Next.js didn't have this problem, and that 12.0.9-canary.11 had introduced it.

It was probably caused by #33635, is my guess.

Analysis of version 12.0.9-canary.11

CleanShot 2022-02-10 at 15 12 06@2x

Analysis of version 12.0.9-canary.9

CleanShot 2022-02-10 at 15 12 50@2x

Expected Behavior

It seems unintentional that the size of individual edge SSR bundles was increased by 5x, just to support the expected functionality when rendering.

It'd be great if they'd return to a size that's closer to their original one, since a larger bundle effects the server-rendering performance (that's part of the reason why Cloudflare Workers [and probably others too] limit them to 1 MB by default, which is now being exceeded as of 12.0.9-canary.11).

Also note that next-rsc-demo worked just fine before 12.0.9-canary.11. I understand that new functionality was added, but the penalty for that seems to be way too large.

To Reproduce

  1. Clone Vercel's next-rsc-demo
  2. Upgrade the next dependency to 12.0.9-canary.9
  3. Notice that the bundle files in .next/server/chunks have a "reasonable" size
  4. Upgrade the next dependency to 12.0.9-canary.11
  5. Notice that the bundle files in .next/server/chunks have suddenly shot up to over 1 MB for one chunk
@leo leo added the bug Issue was opened via the bug report template. label Feb 10, 2022
@leo leo changed the title 12.0.9-canary.11 drastically increased size of edge SSR bundle 12.0.9-canary.11 5x'd size of edge SSR bundle Feb 10, 2022
@icyJoseph
Copy link
Contributor

icyJoseph commented Feb 10, 2022

Hi,

I do see that a chunk shoots up to 1.3MiB on 12.0.9-canary.11.

    1.3 MiB [##########]  817.js
   28.0 KiB [          ]  40.js
    8.0 KiB [          ]  863.js
    4.0 KiB [          ]  976.js
    4.0 KiB [          ]  144.js
    4.0 KiB [          ]  font-manifest.json

Is there any limitation for you to try 12.0.11-canary.11? I have tried with that build, and the error is gone.

   76.0 KiB [##########]  664.js
   16.0 KiB [##        ]  755.js
    4.0 KiB [          ]  320.js
    4.0 KiB [          ]  730.js
    4.0 KiB [          ]  font-manifest.json

My wild guess is that the import in packages/next/server/web-server.ts, was bringing unwanted modules.

import { LoadComponentsReturnType } from './load-components'

The current implementation is doing the proper way to bring a type, without bringing the entire module:

import type { LoadComponentsReturnType } from './load-components'

@leo
Copy link
Contributor Author

leo commented Feb 10, 2022

@icyJoseph Have you changed anything else when switching to 12.0.11-canary.11?

For me, anything above 12.0.9-canary.11 (and therefore also 12.0.11-canary.11) has this problem.

@leo
Copy link
Contributor Author

leo commented Feb 10, 2022

To verify what I said above, run npm install and ANALYZE="1" npm run build in this repo.

This is the result I got:

CleanShot 2022-02-10 at 17 29 34@2x

@icyJoseph
Copy link
Contributor

icyJoseph commented Feb 10, 2022

Aha, now I got it. Confirmed. Somewhere, there's a Buffer being used! I think that explains crypto-browserify's present, and probably raw-body. I guess it could also be that for some reason, the bundler is assuming that it needs to pack browserified versions of Node API's, instead of letting them raw.

Sorry for the initial misfire. It seems I had messed up the runtime value.

I'll keep looking around.

@shuding
Copy link
Member

shuding commented Feb 11, 2022

Hi all, thanks for reporting & looking into this! We are aware of the size increase, and we are work on optimizing the base server. Will keep this issue open for tracking. 🙏

kodiakhq bot pushed a commit that referenced this issue Feb 11, 2022
Related to #34185, this PR reduces the size of chunk that contains web-server.ts from 1.14mb to 210.8kb, by splitting base-http and api-utils into different environments.

Only affected thing is we can't have SSG preview mode for the web runtime via `getStaticProps`.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
@balazsorban44 balazsorban44 added area: experimental and removed bug Issue was opened via the bug report template. labels Feb 11, 2022
@leo
Copy link
Contributor Author

leo commented Mar 18, 2022

@shuding I think this issue can be closed now, correct?

@github-actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 15, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants