NextJS - size by page

[vio]

• rel: Utils: Asset tags #592

[dannyrb]

Any thoughts on this? I'd be happy to contribute to make this feature a reality.

[vio]

Hi @dannyrb, really appreciated! 🙇

There are a couple of missing pieces that we need to build in order to support the extra data. Some were considered before, so I will try to go over them this week. Feel free to add your input if you have anything specific in mind.

1. How should we load the extra data across bundle-stats plugins and @relative-ci/agent.
2. How should we extract the data
   2.1 asset tags that can be filtered (like the existing module chunks)
   2.2 distinct metrics for each nextjs page
3. How should we display the data
   3.1 a filter for assets
   3.2 metric entry for each page

[JoeKarow]

Not sure if this would be helpful, but next-bundle-analyzer by Hashicorp shows size by page route and pulls this info from the webpack stats files, I believe. This could inspire/inform how to move forward on this feature.

[vio]

Thanks for the example @JoeKarow!

Nextjs page data is generated into a distinct JSON file, outside of the webpack compilation (we do not have access to it):

⋊>  cat .next/build-manifest.json                                                                                                                                                            01:28:24
{
  "polyfillFiles": [
    "static/chunks/polyfills-78c92fac7aa8fdd8.js"
  ],
  "devFiles": [],
  "ampDevFiles": [],
  "lowPriorityFiles": [
    "static/WfrGdAs96XJmQOkoopwVa/_buildManifest.js",
    "static/WfrGdAs96XJmQOkoopwVa/_ssgManifest.js"
  ],
  "rootMainFiles": [],
  "pages": {
    "/": [
      "static/chunks/webpack-76e52cac82263066.js",
      "static/chunks/framework-661d1ef9bdc041d7.js",
      "static/chunks/main-02f34d919e9ab689.js",
      "static/css/8044e0ed479a52e3.css",
      "static/chunks/633-86a838ebe7d627d8.js",
      "static/chunks/328-0d85e1e7a13cac32.js",
      "static/chunks/784-aecbeffe3be71f30.js",
      "static/css/93f40d7f452663e9.css",
      "static/chunks/pages/index-805912f64b63f987.js"
    ],
    "/_app": [
      "static/chunks/webpack-76e52cac82263066.js",
      "static/chunks/framework-661d1ef9bdc041d7.js",
      "static/chunks/main-02f34d919e9ab689.js",
      "static/chunks/pages/_app-0e95b4efe7a8f550.js"
    ],
    "/_error": [
      "static/chunks/webpack-76e52cac82263066.js",
      "static/chunks/framework-661d1ef9bdc041d7.js",
      "static/chunks/main-02f34d919e9ab689.js",
      "static/chunks/pages/_error-780125119a349216.js"
    ],
    "/about": [
      "static/chunks/webpack-76e52cac82263066.js",
      "static/chunks/framework-661d1ef9bdc041d7.js",
      "static/chunks/main-02f34d919e9ab689.js",
      "static/css/8044e0ed479a52e3.css",
      "static/chunks/633-86a838ebe7d627d8.js",
      "static/chunks/328-0d85e1e7a13cac32.js",
      "static/chunks/333-11168787c18b52b5.js",
      "static/css/7cbb5dc407e17895.css",
      "static/chunks/pages/about-f07d8902fba99dd0.js"
    ],
}

We now have a plan for passing multiple artifacts to bundle-stats CLI / agent, we will start on this in the near future.

[github-actions]

This issue is stale because it has been open for 90 days with no activity.

[phryneas]

Still very much a feature request.