[📖] How to debug Big js chunks on build

[czuma]

Suggestion

Create https://qwik.dev/docs/guides/debugging section to add information about how to debug and identify sub-optimal situations.

I was facing this warning about a big js chunk when i preview my site, and don't have idea of what library or where is that. So on big projects will be very difficult to identify what is causing the big chunk of data. i receive some help on discord community but end with a better solution, a vite pluggin called rollup-plugin-visualizer the process is more or less easy.

• npm install the package
• Edit vite.config.ts to add the plugin
• excecute the preview

After the first run will create the file stats.html on the root project and you can get an interactive graphic with the name of the chunks and the content of it, is size and so on.

on my personal case as you can see the big chunk is a lib called "faker" that i was using on dev to generate test data.

After the identification i can get rid of them on my IDE search tool.

@maiieul ask me to create this issue so we don't forget to add this info on the docs

this week i will create a PR with all the steps

[czuma]

im already create the PR what now?

[czuma]

@wmertens found a better way to do it with npx vite-bundle-visualizer need changes to PR #6857