Bundle map

webpack · esbuild · heaviest paths · duplicate packages

번들 지도

webpack stats.json 이나 esbuild metafile 을 넣으면 어디가 무거운지 넓이로 보여 주고, 두 번 들어간 꾸러미를 찾아 줍니다

무거운 곳
두 번 들어간 꾸러미
webpack stats.json 이나 esbuild metafile 을 넣으세요

Reads a webpack stats.json or an esbuild metafile and shows what is heavy, as a folder tree drawn by area. It also finds packages that got bundled twice.

How to use it

  1. Paste a stats.json or a metafile — the format is detected for you
  2. Read the area map largest tile first — tile area is size
  3. Pick what to cut from the heaviest-path ranking
  4. Check the duplicate-package list — the usual reason a bundle suddenly grows

Common questions

Which formats does it read?
Both webpack stats.json (modules[]) and esbuild metafile (inputs/outputs). Paste either one and it works out which it is.
Why a tree instead of a total?
When a bundle grows, the number you need is not the total but who ate it. A stats file is tens of thousands of lines, so it is folded into a folder tree drawn by area.
How does it find duplicates?
It gathers packages with the same name that came in from different paths (nested node_modules) and lists where each copy sits.

Other tools

Stays on your device What you enter is handled inside your browser only — nothing is stored or sent anywhere.

This tool page states where what you enter goes — see the badge above. All tools · KarmoLab · Who made this · Built with AI. View source