JSバンドル依存関係ビジュアライザー

このツールが見つけるもの

現代のWebサイトは、何百ものソースファイルから構築された1つのJavaScriptファイルを配信します。このツールはそのファイルの中を調べ、元のモジュール境界を復元しようとします——特定のバンドラーに依存せず、テキストパターン(圧縮された瞬間に破綻します)ではなく実際のAST形状を使います。

次の順序で試みます。

1. webpackのfunction-map形式 — 引数がオブジェクトまたは配列で、各要素が (module, exports, require) 形式の関数であるIIFE。これは、実際のモジュールマップ呼び出しがどれほど深くネストしていても、古典的な webpackUniversalModuleDefinition ラッパーも検出します。
2. webpackのchunk-push形式 — (self.webpackChunkXxx = self.webpackChunkXxx || []).push([ids, {modules}, runtime])。webpack 5のコード分割が生成する形式です。
3. Rollup / esbuild / Viteのコメント帯 — このファミリーの未圧縮ビルドの一部は、各モジュールのコードの前に // パス/to/file.js という行コメントを残しています。存在する場合、これがモジュール境界になります。
4. 正直なフォールバック — 上記のいずれも見つからない場合(ほとんどは、境界マーカーが一切残っていない圧縮・スコープホイストされたRollup/esbuild/Viteビルドであるため)、ツールはそのことを明示し、モジュール一覧を捏造する代わりにファイルのトップレベル宣言を一覧表示します。

結果の読み方

モジュールが見つかった場合、各モジュールは文字通りのモジュールIDで何を require() しているか、そして同じくらい有用な、他のどのモジュールから依存されているかを一覧表示します。何も実行せずに「これを削除したら何が壊れるか」を双方向に追跡できます。

設計上の誠実さ

動的な require(require(変数))や import() 呼び出しは静的に解決できないため、単純に依存関係一覧から除外されます——依存関係を過小評価する可能性はありますが、決して捏造はしません。同様に、検出されたマップに含まれないモジュールIDが require() 呼び出しで参照されている場合でも、専用のカードはなくても、エッジの対象として表示されます。これは通常、そのモジュールがここに貼り付けられなかった別のチャンクにあることを意味します。

プライバシー

すべては実際のJavaScriptパーサー(acorn)によってブラウザ内で処理されます。貼り付けまたはアップロードしたバンドルがどこかに送信されることはありません。