Stats after build

[sergiodxa]

Proposal

Show build stats per route with the size of the JS each route will load if it was the first accessed route.

Background

Right now, there's no built-in way to know the amount of JS a route may need other than opening it in, you could use the source maps to analyze them but a simplified version at build could be better.

Use Case

It's helpful to know how much JS you are going to actually load on each page (if it's the first one) and realize "hey this page which is fairly static is loading a ton of JS, maybe something is off with my imports" and fix it or at least debug more with other tools to inspect source maps.

API/Example

When building the app the developer could add a flag to generate these build stats

remix build --stats

The result could be something similar to what Next.js shows

Page                              Size     First Load JS
┌ λ /                             5.31 kB         132 kB
├   /_app                         0 B             120 kB
├ ○ /404                          243 B           120 kB
├ λ /articles                     10.9 kB         138 kB
├ λ /articles/[slug]              10.9 kB         138 kB
├ λ /about                        10.9 kB         138 kB
├ λ /api/auth/[...auth0]          0 B             120 kB
├ λ /contact                      1.53 kB         125 kB
├ λ /legal                        1.06 kB         128 kB
+ First Load JS shared by all     120 kB
  ├ chunks/framework.09a88f.js    42.4 kB
  ├ chunks/main.5354f3.js         24.2 kB
  ├ chunks/pages/_app.ca95d4.js   52.1 kB
  ├ chunks/webpack.117468.js      1.04 kB
  └ css/06c05b289f192f66d092.css  7.87 kB

The stats should be behind a flag because collecting them could slow down the build, so it's better if it's opt-in.

An extra step could allow the stats to highlight routes over a configured size limit, useful to set a performance budget and know when we're near to reach it or we already reached it.

remix build --stats --budget=150

Now, the stats result could highlight the routes which will load more than 150kb (per the configuration) of JS.

[sayinserdar]

Hey! It's been a while since this discussion created. We would really appreciate if this feature landed in one of the foreseeable future releases. Cheers. @sergiodxa

[p-christ]

+1 this would be extremely helpful and is the main thing i miss from next js