javascript - @next/bundle-analyzer 中的 "First Load JS"实际测量的是什么？

Question

NextJS 捆绑分析器提供如下输出:

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

“First Load JS”究竟测量了什么，为什么它不等于“First Load JS by all”与页面大小及其子页面的总和。 IE。根据这个输出，我希望 First Load JS 等于 12 kb + 10.3 kb + 195 kb，而不是 368 kb。
谢谢。

Answer 1

这是文档所说的:

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 aseparate metric.

如果您正在阅读上述内容并且对循环引用感到恼火，那么您并不孤单。在您的情况下，输出更加令人困惑，因为您只列出了一条路线(尽管您可能切断了更多路线)，但文档确实有些帮助，请注意“输出显示有关每条路线的信息”。
基本上，当用户第一次访问该站点时，他们会下载 First Load JS首先从服务器获取他们请求的路由，然后在页面呈现时开始在客户端加载其他 Assets 。
这个输出的用户体验非常令人困惑，但是一旦你理解了这些术语，这些数字实际上是加起来的。 First Load JS shared by all相比之下，指的是在每条路由之间共享(并在访问时加载)的 JS Assets 。在您的情况下，所有共享的 First Load JS = 195KB，这(大约)等于(27.6+91.4+9.01+46.9+6.39+11.4+2.72)......显然不包括 css，(我猜它不是 JS 的唯一原因，这看起来很愚蠢，但无论如何)。
“所有人共享”指标的要点是，如果您可以减少该数量，您将减少用户在每条路线上必须下载的数量，因此它表面上是开始优化的好地方。