Next.js: _app.js build bundle size too big

[gnoyixiang]

Bug report

The _app.js build bundle size is too big

Describe the bug

I have looked through many issues for solutions and it seems that the team has repeatedly mentioned that next.js build bundle size is small. What I realised was that the _app.js was already 216 kb (with yellow indication, not green) when I have not added any additional code or library.

Adding a little more code or importing some libraries in a custom _app.js file will increase the bundle size until the indicator becomes red, meaning it is a unacceptable size?

To Reproduce

Just do npx create-next-app and yarn build

Expected behavior

Currently, _app.js bundle size is already 216 kb. Expected should be a much smaller value. I don't know what should be the acceptable size, but of course, the smaller the better. Otherwise, it seems like next.js is really too bloated.

Screenshots

System information

• OS: Windows
• Version of Next.js: 9.1.5

[enesTufekci]

@gnoyixiang assuming that you are using custom app if so, can you share the code if it is possible. Also you can check whatever goes into the bundles via bundle analyzer.
https://www.npmjs.com/package/@next/bundle-analyzer

[hushino]

Same issue here, and i'm not using a custom app, to reproduce Just do npx create-next-app and yarn build.
Is the size expected by the team?

[timneutkens]

Can you try next@canary, it includes improvements in the way that the sizes are displayed.

[sakulstra]

@timneutkens i just tested without a custom _app.js and the output size is still 211kb on "next": "^9.1.6-canary.5", ... not sure why it's different to the reported one(due to typescript?), but it's still in the orange area.

[timneutkens]

Do you see the split out between framework etc chunks? Can you post a screenshot?

[srdjan]

for what it is worth, total size difference comparing to the older version (v9.0.7), is -30kb for this small app (repo: https://github.com/srdjan/next-repros).

But it can be confusing at first sight - since the new output presents both _'shared by all'_ total and each individual shared item in the similar way (vertically aligned)...

before:

latest:

[gnoyixiang]

@gnoyixiang assuming that you are using custom app if so, can you share the code if it is possible. Also you can check whatever goes into the bundles via bundle analyzer.
https://www.npmjs.com/package/@next/bundle-analyzer

I did not use a custom app.js or any additional code before building.

Can you try next@canary, it includes improvements in the way that the sizes are displayed.

There isn't a lot of documentation on how to use this and how it improves the situation. If using next@canary is better, it should be the default recommended one to those who are using your framework.

Anyway this issue is very easy to replicate and I have not seen anyone from the team who has really explained/addressed this issue.

[Timer]

Please try [email protected] (next@canary). This should show proper output sizes.

Closing as fixed.

[srdjan]

just a suggestion... consider removing (or showing in different color) number for the total size of shared:

[luanlucho]

Hey guys I'd created a new project following your with redux thunk example and my _app.js file size became larger than 500kb.

Please shed some light.