Source Map サイズ分析

このバイトはどこへ消えたのか

本番バンドルは一つの巨大な圧縮ファイルです。それが340KBだとわかっても、なぜそうなるのかは何もわかりません — そしてバンドルを削減しようとするときに本当に重要なのはその「なぜ」です。このツールはその問いに直接答えます。バンドルとその.mapファイルを読み込むと、すべてのバイトがそれを生み出した元のモジュールに割り当てられます。

割り当ての仕組み

source mapのマッピングは「生成後の4110列目はsrc/utils/format.jsに由来する」と記録しています。このツールはファイル内のすべてのマッピングを順番にたどり、同じ生成行にある次のマッピングまでの間隔を測定します — その間隔が、そのマッピングのソースに割り当てられる生成コードの範囲です。これは有名なCLIツールsource-map-explorerが使うのと同じ行単位の近似手法であり、あくまで近似であることを正直に示します。同じ生成行上で隣接する2つのトークンの間に何もマッピングされていない箇所（余分な空白、圧縮ツールが挿入した文字など）は、近くのソースに黙って割り当てられるのではなく、独自の未割り当てカテゴリに分類されます。

構造上のバイト — 生成行の間の改行 — も同じ理由で独自のカテゴリを持ちます。それらはファイルの構造に属するものであり、特定のモジュールに属するものではありません。

整合性チェック

実行のたびに、「合計Yバイト中Xバイトを割り当て」という明確な結果と、未割り当て・構造上のバイト数、そして割り当て済み＋未割り当て＋構造上の合計がファイルの全長と正確に一致するかどうかが表示されます。これは単なる見た目の演出ではなく、バイトが黙って失われたり二重に数えられたりしていないことの保証であり、ツールの言葉を鵜呑みにするのではなく、自分自身で確認できます。

ファイル別・フォルダ別

元のソースファイルごとの1行表示と、最上位フォルダ単位の集計を切り替えられます。node_modules/lodashはlodashが寄与したすべてのファイルを合算するので、40個の個別ファイルを先にスクロールすることなく「この依存関係が実際どれだけコストになっているか」がわかります。すべてサイズの大きい順に並び、CSVエクスポートでも同じ数値をそのまま利用できます。

プライバシー

両方のファイルはすべてブラウザ内で読み込み・処理されます。アップロードは一切行われません。