Visualiseur de Dépendances de Bundle JS

Ce que cet outil trouve

Les sites modernes livrent un seul fichier JavaScript construit à partir de centaines de fichiers sources. Cet outil regarde à l'intérieur de ce fichier et tente de retrouver les frontières de modules d'origine — indépendamment du bundler, en utilisant la vraie forme de l'AST plutôt qu'une correspondance de texte, qui s'effondre dès que le code est minifié.

Il essaie, dans cet ordre :

1. Forme function-map de webpack — une IIFE dont l'argument est un objet ou un tableau où chaque entrée est une fonction (module, exports, require). Cela détecte aussi le classique wrapper webpackUniversalModuleDefinition, quelle que soit la profondeur à laquelle se trouve le véritable appel de la carte des modules.
2. Forme chunk-push de webpack — (self.webpackChunkXxx = self.webpackChunkXxx || []).push([ids, {modules}, runtime]), la forme que produit le découpage en chunks de webpack 5.
3. Bannières en commentaire Rollup / esbuild / Vite — certains builds non minifiés de cette famille conservent un commentaire de ligne // chemin/vers/fichier.js avant le code de chaque module. Quand elles existent, elles deviennent les frontières de modules.
4. Repli honnête — si rien de tout cela n'est trouvé (presque toujours parce que le bundle est un build minifié et à portée aplatie de Rollup/esbuild/Vite, sans aucun marqueur de frontière), l'outil le signale et liste les déclarations de premier niveau du fichier au lieu d'inventer une liste de modules.

Lire le résultat

Quand des modules sont trouvés, chacun liste ce qu'il require() par id de module littéral et, tout aussi utile, quels autres modules le requièrent en retour — pour tracer « si je retire ceci, qu'est-ce qui casse » dans les deux sens, sans rien exécuter.

Honnêteté par conception

Les requires dynamiques (require(variable)) et les appels import() ne peuvent pas être résolus statiquement, ils sont donc simplement absents de la liste des dépendances — cela peut sous-compter les dépendances, mais n'en inventera jamais. De même, un id de module référencé par un require() qui n'est pas dans la carte détectée reste affiché comme cible d'une arête même sans carte propre ; cela signifie généralement qu'il vit dans un autre chunk qui n'a pas été collé ici.

Confidentialité

Tout s'exécute dans votre navigateur via un vrai analyseur JavaScript (acorn). Le bundle que vous collez ou téléversez n'est jamais envoyé où que ce soit.