search

relative-ci / bundle-stats

Analyze bundle stats(bundle size, assets, modules, packages) and compare the results between different builds. Support for webpack, rspack, rollup and vite.
MIT License
551 stars 20 forks source link

NextJS - size by page #4318

Open vio opened 5 months ago

vio commented 5 months ago
dannyrb commented 5 months ago

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

vio commented 5 months ago

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 commented 4 months ago

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 commented 2 months ago

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.