@next/bundle-analyzer 中的“First Load JS”实际测量什么？

Question

NextJS 包分析器给出如下输出：

\n

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

\n

“首次加载 JS”到底衡量什么？为什么它不等于“所有人共享的首次加载 JS”与页面及其子页面大小的总和。即，根据此输出，我预计 First Load JS 等于 12 kb + 10.3 kb + 195 kb，而不是 368 kb。

\n

谢谢。

\n

Answer 1

这是文档所说的：

\n

\n

Size \xe2\x80\x93 导航到页面客户端时下载的资源数量。每个路由的大小仅包括其依赖项。

\n

First Load JS \xe2\x80\x93 访问页面时从服务器下载的资源数量。所有人共享的 JS 数量显示为\n单独的指标。

\n

\n

如果您正在阅读上述内容并对循环引用感到恼火，那么您并不孤单。在您的情况下，输出非常令人困惑，因为您只列出了一条路线（尽管可能会切断更多路线），但文档确实有所帮助，请注意“输出显示有关每条路线的信息”。

\n

基本上，当用户第一次访问该网站时，他们将First Load JS首先从服务器下载其请求的路线，然后在页面呈现时开始在客户端加载其他资源。

\n

这个输出的用户体验非常令人困惑，但是一旦你理解了这些术语，这些数字实际上就会加起来。

\n

First Load JS shared by all相反，指的是在每个路由之间共享（并在访问时加载）的 JS 资源。在你的情况下，所有人共享的First Load JS = 195KB，（大约）等于（27.6+91.4+9.01+46.9+6.39+11.4+2.72）...显然不包括css，（我猜唯一的原因是它不是 JS，这看起来很愚蠢，但无论如何）。

\n

“所有人共享”指标的要点是，如果您可以减少该数量，您将减少用户在每条路线上必须下载的数量，因此这表面上是开始优化的好地方。

\n

如果以上所有内容仍然令人困惑，更清晰的输出可能是：

\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

页	特定于路由的客户端	特定于路由的服务器端	服务器端总计	总计（服务器 + 客户端）
/	12KB	161KB（368KB - 195KB - 12KB）	356KB（368KB - 12KB）	368KB

\n