4% increase in bundle size from next 11.1.2 to 12.0.7

[LarsBuur]

What version of Next.js are you using?

12.0.7

What version of Node.js are you using?

14.15.1

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

We have been struggling with our bundle size and put a huge effort into making it as small as possible

Going from Next v. 11.1.2 to 12.0.7 means an increase in bundlesize from 127Kb to 132 kb.

This is before and after from next build:

Page                                                                               Size     First Load JS
├   /_app                                                                          0 B            75.8 kB
├ ● /[...slug] (ISR: 3600 Seconds) (122414 ms)                                     14.1 kB         127 kB

We tried enabling and disabling swcMinify in next.config.js without any noticeable difference

Page                                                                               Size     First Load JS
├   /_app                                                                          0 B            80.6 kB
├ ● /[...slug] (ISR: 3600 Seconds) (123146 ms)                                     14 kB           132 kB

Is this to be expected?

Expected Behavior

Same of less size. Not bigger.

To Reproduce

The difference in percentage would differ from project to project. To reproduce just monitoring bundle "First Load JS" from next build reveals the problem

[kweiberth]

I also just tried to bump from v11.0.0 to v12.0.7 and experienced similar increase of about 4kb in first load JS.

[TheThirdRace]

Same here, from 11.1.2 to 12.0.7, I have an increase of 4KB for 12.0.7 with swcMinify: false.

If I enable swcMinify: true, I add another 4KB to the bundle for a total increase of 8KB in 12.0.7...

[huozhi]

Could you please try next@12.0.8-canary.13 to see if it resolves your issue? Thanks 🙏

[TheThirdRace]

@huozhi
Just tried with next@12.0.8-canary.13 and unfortunately there wasn't any significant difference.

Without swcMinify, the bundle was the same size as with 12.0.7

With swcMinify, the bundle only increased by 3 KB instead of 4 KB with 12.0.7

[huozhi]

@TheThirdRace Do you have a minimal reproduction for it?

@LarsBuur does this version solve your problem?

[TheThirdRace]

@huozhi
What I tried is to change from 12.0.7 to 12.0.8-canary.13 and saw the bundle didn't reduce in size with yarn build.

Unfortunately, I don't have a version at 11.1.2 anymore that would allow you to simply compare directly.

I'll send you an invite to my private repo so you can check it out yourself.

I have a branch nextjs-11-1-2 and a branch nextjs-12-0-7 which were made to show the slower compile time of 12.0.7 compared to 11.1.2 for another thread. Unfortunately, there's more than 1 commit between the 2 branches, meaning it's not just the migration to 12.x.

If you want to validate build size from 11.1.2 to 12.0.7, you'll have to migrate the nextjs-11-1-2 branch to NextJs 12 manually.

[LarsBuur]

@huozhi. Yes this solves my problem. I see the same bundle size moving from 11.1.2 to 12.0.8-canary.13.

Thank you for your effort.

[huozhi]

@TheThirdRace It feels like sth else besides the styled-jsx since it's resolved for the original issue. Would you mind opening another issue with a minimal reproduction with more public visibility so that more people can help on it? 🙏

[kweiberth]

This didn't solve my bundle size increase. On 11.0.0 first load JS is 98.1kb, and on 12.0.8-canary.13 it is 102kb.

[TheThirdRace]

@huozhi
I could create a new ticket, but I won't be able to share a reproduction publicly as the repo is private.

And without the code itself, I doubt anyone can really help...

I sent your an invite already for the private repo in case you have time to take a look

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.