CODEWITHSUNDEEP
javascriptnext.js
Eric Conner
Eric Conner

Reputation: 10752

What does "First Load JS" in @next/bundle-analyzer actually measure?

The NextJS bundle analyzer gives some output like this:

Page                                                                         Size     First Load JS
┌ λ /                                                                        12 kB           368 kB
├   └ 79.202101.46dabc.chunk.css                                             10.3 kB
...
+ First Load JS shared by all                                                195 kB
  ├ chunks/0e69992b3e9a8d51f37748cf97b75268d47a0f0c.f372af.js                27.6 kB
  ├ chunks/cf0e5769c2fa5761a95adfa95a4e062fb86f8f05.272397.js                91.4 kB
  ├ chunks/commons.9707f2.js                                                 9.01 kB
  ├ chunks/framework.efaa9a.js                                               46.9 kB
  ├ chunks/main.9965a5.js                                                    6.39 kB
  ├ chunks/pages/_app.a4ce0d.js                                              11.4 kB
  ├ chunks/webpack.8e3a04.js                                                 2.72 kB
  └ 62.202101.796f1f.chunk.css                                               3.7 kB

What exactly does "First Load JS" measure and why does it not equal the sum of "First Load JS shared by all" and the size of the page and it's sub-pages. I.e. based on this output I would expect First Load JS to equal 12 kb + 10.3 kb + 195 kb, not 368 kb.

Thanks.

Upvotes: 11

Views: 5557

Answers (1)

Tim
Tim

Reputation: 3033

Here's what the docs say:

Size – The number of assets downloaded when navigating to the page client-side. The size for each route only includes its dependencies.

First Load JS – The number of assets downloaded when visiting the page from the server. The amount of JS shared by all is shown as a separate metric.

If you're reading the above and annoyed by the circular references, you're not alone. The output is extra confusing in your case because you only have one route listed (though presumably more you cut off), but the docs do, somewhat helpfully, note that "the output displays information about each route."

Basically, when a user hits the site the first time, they'll download the First Load JS for their requested route from the server first, then start loading additional assets client-side as the page renders.

The UX of this output is super confusing, but once you understand the terms, the numbers actually do add up.

First Load JS shared by all, in contrast, refers to JS assets shared across (and loaded when visiting) every single route. In your case, First Load JS shared by all = 195KB, which is (approximately) equal to (27.6+91.4+9.01+46.9+6.39+11.4+2.72) ... the css apparently isn't included, (I guess for the sole reason that it's not JS, which seems dumb, but whatever).

The point of the "shared by all" metric is that if you can reduce that number you'll reduce the amount your users have to download on every single route, so it's ostensibly a good place to start optimizing.

If all of the above is still confusing, a clearer output might be:

Page Route-Specific Client-Side Route-Specific Server-Side Total Server-Side Total (Server + Client)
/ 12KB 161KB (368KB - 195KB - 12KB) 356KB (368KB - 12KB) 368KB

Upvotes: 9

Related Questions