Open raphaelbadia opened 10 months ago
This deserves to be merged as app
dir router becomes more and more popular
@raphaelbadia
A huge thanks for sharing this!
A question I have about the layout
and page
. Does page size include the layout size or not (to my understanding it does not)?
This impacts the budget
option as it does not represent the whole page size which is relevant I believe. Do you have any suggestions on how this could be improved?
An example:
My budget is 350kb
/layout
is 150kb (~42% of the budget)
/page
is 250kb (~71% of the budget)
but in reality you will fetch layout
+ page
which is 400kb
which is 14% over the budget
.
So basically the script should sum the nested layouts
(if any) and add that sum to the page
itself to get the correct bundlesize. Maybe a future improvement
thanks @raphaelbadia
Many thanks for sharing this @raphaelbadia! I'm working on a project that mostly uses TS, so I have refactored your gist into TS with some additional changes: https://gist.github.com/terrymun/ba53d6921929e27bf9ad2b311fe08a21
Example output in console / GH actions runner:
Comparing the output to the actual next build
command, and the file sizes tally up:
This might be the output you're looking for @astrodomas
amazing @terrymun thank you for sharing it !
Hello everyone, just like issue #42 I wanted to run the bundle analysis in the app directory.
I modified the script to make it work with it instead of pages dir. I didn't bother make it work for both scenarios because I only use appdir.
Here's how you can have it too :
First, install the required dependencies:
Then, you need to copy this gist : https://gist.github.com/raphaelbadia/1fbc948928378a4ce0e1ce90923263ae to a file in your repository. I called it
report-bundle-size.js
Finally, open your nextjs_bundle_analysis.yml, find the action with name "- name: Analyze bundle" and replace
npx -p nextjs-bundle-analysis report
bynode report-bundle-size.js
Result :
Cheers