[📖] How to debug Big js chunks on build
Maintainers usually reply within 1 day
Nobody has claimed this yet.
- #6857 by @czuma — closed without merging
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 35/100
- Issue type
- Documentation
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- typescript, vite
- Domain
- build-system, documentation
Research direction
Use the proposed /docs/guides/debugging section as the documentation target. Start by reviewing the existing guide structure, then follow the reported preview workflow with vite.config.ts and rollup-plugin-visualizer. Done means documenting setup, the generated stats.html visualization, and how it identifies oversized chunks.
Written by the indexing model from the issue text.
Description
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
- Dominant language
- TypeScript
- Stars
- 22.1k
- Forks
- 1.4k
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 130
Getting set up
Starts the project's dev container in your browser, under your own GitHub account.
- Ships a Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from QwikDev/qwik
-
[🐞] Production SSR render errors are never logged or passed to `next()` (node middleware returns on `headersSent` first)Possibly taken @bunnysayzz claimed this 12 days ago. OpenIMPORTANT
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
QwikDev/qwik#9191 · 6 comments ·
Maintainers usually reply within 1 day
-
docs router V2
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
DX enhancement V2
Difficulty 2/5 1-3 hours Newbie friendliness 64/100
QwikDev/qwik#8480 · 2 comments ·
Maintainers usually reply within 1 day
-
[🐞] Library builds (--mode lib) print manifest warnings and emit an app manifestPossibly taken @mridang claimed this 1 day ago. Open
Difficulty 2/5 1-3 hours Newbie friendliness 25/100
Maintainers usually reply within 1 day
-
Difficulty 5/5 Over a week Newbie friendliness 15/100
Maintainers usually reply within 1 day
Similar issues
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
awslabs/visual-asset-management-system#804 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
restatedev/sdk-typescript#813 ·
-
bug desktop P1 session XS
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 62/100
Merit-Systems/x402scan#1312 ·
-
type:bug
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Azure/apiops-cli#331 ·
Maintainers usually reply within 3 days