#Are first load JS route stats output to a file?

31 messages · Page 1 of 1 (latest)

bold plover
#

For instance this output

Route (app)                              Size     First Load JS
┌ ○ /                                    145 B            82 kB
├ ○ /_not-found                          869 B          82.7 kB
├ λ /[slug]                              145 B            82 kB
├ λ /api/test                            0 B                0 B
├ λ /api/test/test2                      0 B                0 B
└ ○ /static                              145 B            82 kB
+ First Load JS shared by all            81.8 kB
  ├ chunks/938-5e061ba0d46125b1.js       26.7 kB
  ├ chunks/fd9d1056-735d320b4b8745cb.js  53.3 kB
  ├ chunks/main-app-e70e3644c45bd540.js  220 B
  └ chunks/webpack-7f3c39ccc24bf838.js   1.65 kB

I don't think there's any way of writing those stats to a file in say the .next directory is there? Ideally JSON format. It's not a feature of @next/bundle-analyzer

rose vaporBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

bold plover
#

My thoughts are related to a possible feature request. One could possibly use this information to test against previous builds and see if there are any adverse findings. If a first load js delta increases by a certain threshold percentage/amount that a CI pipeline could warn or error to alert the devs something weird may have happened.

I'm not sure if people would use this or find this beneficial.

earnest knoll
#

@bold plover

#

I'm not sure how this works in the latest app dir

#

but I can provide some tips that will hopefuly get you on track

#

the info you're looking for will be inside the .next folder

#

after a build is compelted

#

There is code in here that shows how to parse this data for the old pages directory

#

You could adapt a similiar approach for the app dir

#

you'll need to poke around the .next folder after a build occurs

#

and see where this data lives

#

You can also dig around the source code of next

#

and figure out how they rendering these stats as part of the build

#

Another approach

#

or rather, an indirect approach

#

is by piping the stdout of next build into a plain text file

#

and then just parse/regex out the build stats

#

Throw it at chatgpt and ask it to craft some regex / parser code

#

for the nextjs build output

#

Please let me know what you come up with, if you don't I might expand the next-build-size package with this functionality in the future for the app dir specifically

bold plover
#

This is nice @earnest knoll, it's kind of exactly what I'm talking about, lucky that you're around to see my post.

I think the .next directory doesn't have that data for App Dir. I checked in various ways but didn't see it.

I checked the code last night, and it looks like it builds the output here:
https://github.com/vercel/next.js/blob/93eb32d96a05f5254cc2c3e7b8f47e499517e397/packages/next/src/build/utils.ts#L456C10-L456C22

Although I didn't really dig deep into things.

I was curious if I was missing it in the .next directory but also if there was a way that I wasn't aware of. I don't think there is.

Stdout is one approach but it could be brittle as it relies on Next.js not breaking it.

It seems like you are/were interested in this for Page Router, so that's cool, it isn't just me 😆. I'd like to see if this is an interest for more people. I think it would have to be part of the Next Bundler or like you said capture the output. I'd say pay attention to this thread, I might create a discussion on GitHub. I'll ping here if I do so.

Thanks again @earnest knoll

earnest knoll
#

Sounds good!

#

I'll circle back around to this in the near future and do some research too

earnest knoll
#

this function looks like a good clue

#

it accepts a build manifest

#

which i believe is one of the files in the .next output

bold plover
#

Yeah I think I'll try figuring out what that buildManifest is tomorrow. It's possible there may already be a way.

earnest knoll
#

@bold plover hey, I'm curious if you found a solution for this?