バンドルマップ
webpack · esbuild · 重いパスの順位 · 重複パッケージ
번들 지도
webpack stats.json 이나 esbuild metafile 을 넣으면 어디가 무거운지 넓이로 보여 주고, 두 번 들어간 꾸러미를 찾아 줍니다
무거운 곳
두 번 들어간 꾸러미
webpack stats.json 이나 esbuild metafile 을 넣으세요
webpack の stats.json や esbuild の metafile を読み、どこが重いかをフォルダの木と面積で見せます。二重に入った同じパッケージも見つけます。
使い方
- stats.json か metafile を貼る — 形式は自動で判別
- 面積図の大きいマスから見る — マスの面積がそのまま容量
- 重いパスの順位から削る場所を選ぶ
- 重複パッケージの一覧を確認する — バンドルが急に膨らむよくある理由
よくある質問
- どの形式を受け付けますか？
- webpack stats.json（modules[]）と esbuild metafile（inputs/outputs）の両方です。貼れば、どちらかを自動で判別します。
- なぜ合計ではなく木なのですか？
- バンドルが膨らんだとき必要なのは合計ではなく「誰が食べたか」だからです。数万行の stats は目で追えないので、フォルダの木に畳んで面積で見せます。
- 重複はどうやって見つけますか？
- 同じ名前のパッケージが別々のパス（入れ子の node_modules）から入っている場所を集めて見せます。
ほかの道具
この端末の中だけ 入力した内容はブラウザの中だけで処理され、どこにも保存・送信されません。
このツールが入力をどこへ送るかは、上のバッジに書いてあります。 道具の一覧 · KarmoLab · 作った人 · AI と一緒に作っています。 ソースを見る