Next.js: Too large production bundle

[shashkovdanil]

Question about Next.js

Question

Production bundle size for simple Hello world web app is 200KB.

Are there plans for the future to reduce the size? How can you help with this?

[Timer]

Hi @shashkovdanil! Assets aren't minified in development so the bundles appear much larger than they are once build.

Please build and serve your application to see the true size. :smile:

[shashkovdanil]

@Timer, this is production bundle (next build && next start)

[Timer]

Whoops, I saw localhost:3000 and assumed this was a development build.

[timneutkens]

First of all the results are without gzip, which a proxy generally handles.

Besides that yes, sure, it's an ongoing effort to reduce the bundle sizes. We're continuously making progress on this subject. For example: https://nextjs.org/blog/next-8-0-4

[shashkovdanil]

@Timer , @timneutkens Thank you!

[danikaze]

Almost one year later, it's getting bigger... 240kb on NextJS 9.2 with gzip enabled... (376KB resources)

Page                                                           Size     First Load
─ ○ /                                                          241 B       71.7 kB
+ shared by all                                                71.5 kB
  ├ static/_buildManifest.js                                   61 B
  ├ static/pages/_app.js                                       768 B
  ├ chunks/2bba1e316b652d60015dc17b44efa3b9fdf615a2.a9b27a.js  16.2 kB
  ├ chunks/commons.c28bac.js                                   8.51 kB
  ├ chunks/framework.94bc9f.js                                 40.5 kB
  ├ runtime/main.f1c7ce.js                                     4.74 kB
  └ runtime/webpack.91b117.js                                  746 B

Do we know anything about this? :)

[timneutkens]

○ / 241 B

This is 241 bytes gzipped, not 240kB.

[timneutkens]

Also latest next@canary drops bundle sizes by a minimum of 13kB gzipped, even more in applications that are not just 'hello-world':

Page                                                           Size     First Load
─ ○ /                                                          184 B       59.4 kB
+ shared by all                                                59.2 kB
  ├ static/_buildManifest.js                                   61 B
  ├ static/pages/_app.js                                       766 B
  ├ chunks/665691c8a95c4baf258c3bd7c009aa71d427e465.6e1732.js  12.5 kB
  ├ chunks/framework.33db2b.js                                 40.5 kB
  ├ runtime/main.d9a74f.js                                     4.66 kB
  └ runtime/webpack.b65cab.js                                  746 B

[danikaze]

oh sorry, I got the 240 KB transferred / 376 KB resources from Chrome's Network tab in Dev Tools ;)

But good to know it's being optimized step by step.
It's just that I was shocked by seeing that, when a full React application weights around 140kb gzipped (depending on the application but I'd say it was a big one)

Mostly, I was worried I did something wrong >_<

[timneutkens]

It's just that I was shocked by seeing that, when a full React application weights around 140kb gzipped (depending on the application but I'd say it was a big one)

Next.js is divided roughly like this:

• React / React-DOM - total of 40.5 kB gzip
• Next.js hydration, Router and Head manager - around 15kB gzip however this size also includes the url and querystring package for parsing urls

Note that means that you don't need helmet (6.4 kB) and react-router (9.4
kB) etc.

[danikaze]

Thanks to this

• React / React-DOM - total of 40.5 kB gzip
• Next.js hydration, Router and Head manager - around 15kB gzip however this size also includes the url and querystring package for parsing urls

I checked the loaded files and, effectively the biggest one was not from nextjs, but react-dev-tools's backend.js (extra 166kb)
Nice to know and locate all this files :)
Very informative. Thanks Tim!

[timneutkens]

I checked the loaded files and, effectively the biggest one was not from nextjs, but react-dev-tools's backend.js (extra 166kb)

Hence why I always check in external tools or incognito mode 😄