Use Bundlesize with Next.js

[alejandronanez]

👋 Hello Next.js community!

I'm working on adding Performance Budgets for a project that uses Next.js' SSG. What happens is that I can't think of a way to add BundleSize by @siddharthkp to my project, due to the way Next.js builds its Javascript.

Look at this image

Questions

• Is there a way to get that First Load shared by all size value somewhere after running next build so I can tell Bundlesize what files to look out for? I don't think so as I believe this is calculated on the fly based on multiple files.
• What file inside the .next build folder will give me how much Javascript I'm loading per each route, /blog and /blog/[slug] in this case
• Is that First Load JS column the sum of each resource + shared scripts?
• What files should I pay attention to when I use Bundlesize?

Thanks,

[isaachinman]

@timneutkens Just came across this same issue myself, and am wondering if we can maybe get an official bundlesize example?

[siddharthkp]

👋 I think you can get a little further by using the glob pattern in bundlesize config: https://github.com/siddharthkp/bundlesize2#customisation

(Also, while you're at it, please migrate to bundlesize2: https://github.com/siddharthkp/bundlesize2)

[isaachinman]

@siddharthkp Yes, you can accomplish something with some globs, but @alejandronanez's points above about first load impact are valid, and have been discussed in other places as well (#10383). Moreover, it's difficult to target the [hash].[hash].js files, which are actually the important ones as far as proprietary code goes.

[siddharthkp]

thanks! went through #10383, I think I understand it better now. will need to read the docs to fully understand what First load JS is