tutorial : using the appdir directory

[raphaelbadia]

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:

yarn add -D gzip-size@6 mkdirp

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 by node report-bundle-size.js

Result :

Cheers

[KajSzy]

This deserves to be merged as app dir router becomes more and more popular

[astrodomas]

@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

[AhmedBaset]

thanks @raphaelbadia

[terrymun]

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

• TypeScript support: you can run it using ts-node / tsx
• Modern await/async patterns and try/catch blocks
• Modern ES6 features like Set()
• Stricter typing for all methods
• Pretty print of final dictionary using console.table
• Map file system paths to detected next.js routes
• Include JS only (and exclude CSS) from bundle size calculations

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

[raphaelbadia]

amazing @terrymun thank you for sharing it !

[fabn]

Any plan to convert this into a pull request?

[opeologist]

app directory is now the recommended next pattern. would love to see this work make its way into the action proper, instead of having to use a gist!