バンドルマップ

webpack, esbuild, 重いパスの順位, 重複パッケージ

번들 지도

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

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

webpack の stats.json や esbuild の metafile を読み、どこが重いかをフォルダの木と面積で見せます。二重に入った同じパッケージも見つけます。

使い方

  1. stats.json か metafile を貼る. 形式は自動で判別
  2. 面積図の大きいマスから見る. マスの面積がそのまま容量
  3. 重いパスの順位から削る場所を選ぶ
  4. 重複パッケージの一覧を確認する. バンドルが急に膨らむよくある理由

よくある質問

どの形式を受け付けますか？
webpack stats.json（modules[]）と esbuild metafile（inputs/outputs）の両方です。貼れば、どちらかを自動で判別します。
なぜ合計ではなく木なのですか？
バンドルが膨らんだとき必要なのは合計ではなく誰が食べたかだからです。数万行の stats は目で追えないので、フォルダの木に畳んで面積で見せます。
重複はどうやって見つけますか？
同じ名前のパッケージが別々のパス（入れ子の node_modules）から入っている場所を集めて見せます。

ほかの道具

容量単位の変換1000 基準, 1024 基準, 表記の違い JSON フォーマッタ整形, ツリー表示, パスをコピー, エラー位置, よくある間違いの修正 拡張子の表何のファイルか, 何で開くか, 分類別

この端末の中だけ 入力した内容はブラウザの中だけで処理され、どこにも保存・送信されません。

このツールが入力をどこへ送るかは、上のバッジに書いてあります。 道具の一覧, KarmoLab, 作った人 , AI と一緒に作っています。 ソースを見る