Next.js bundling / library investigation

how_does_it_work.md

Understanding next.js bundling and 3rd party libraries

Simple next.js app with no styles, no images, just a simple <h1>hello world</h1>

Page                             Size     First Load JS
┌ ○ /                            268 B          63.2 kB
├   /_app                        0 B            62.9 kB
└ ○ /404                         3.06 kB          66 kB
+ First Load JS shared by all    62.9 kB
  ├ chunks/framework.56721e.js   42 kB
  ├ chunks/main.71948a.js        19.4 kB
  ├ chunks/pages/_app.0da268.js  542 B
  └ chunks/webpack.2a5a41.js     952 B

Adding @chakra-ui/react just with the <ChakraProvider> and a <Text>Hello world</Text> element

Page                             Size     First Load JS
┌ ○ /                            5.25 kB         107 kB
├   /_app                        0 B             101 kB
└ ○ /404                         3.08 kB         105 kB
+ First Load JS shared by all    101 kB
  ├ chunks/framework.56721e.js   42 kB
  ├ chunks/main.cdc763.js        19.5 kB
  ├ chunks/pages/_app.9685f2.js  38.9 kB
  └ chunks/webpack.1d8564.js     1.04 kB

+38kb

Now trying a more realistic example, adding swr and using a few more elements from Chakra, only increasing the homepage size

Page                             Size     First Load JS
┌ ○ /                            10.8 kB         112 kB
├   /_app                        0 B             101 kB
└ ○ /404                         3.08 kB         105 kB
+ First Load JS shared by all    101 kB
  ├ chunks/framework.64eb71.js   42 kB
  ├ chunks/main.cdc763.js        19.5 kB
  ├ chunks/pages/_app.2135ce.js  38.9 kB
  └ chunks/webpack.1d8564.js     1.04 kB

WORK IN PROGRESS