Tiny Online Tools logoTiny Online ToolssearchBuscar ferramentas…grid_viewTodas as ferramentas
Iniciochevron_rightFerramentas de engenharia reversachevron_rightVisualizador de Dependências de Bundle JSVisualizador de Dependências de Bundle JS

Visualizador de Dependências de Bundle JS

Encontre os limites de módulos dentro de um bundle webpack, Rollup, esbuild ou Vite e veja qual módulo requer qual, por correspondência real de forma do AST, não por adivinhação de texto.

Origem do bundleColar códigoEnviar arquivo

Ferramentas semelhantes

Inspetor de Bundle Webpack

Inspetor de Bundle Webpack

Detecta o bootstrap de runtime do webpack, o mapa de módulos e os metadados de chunk-push pela forma do AST, mostra o código real de cada módulo e avisa claramente quando um arquivo não é saída do webpack.

Analisador de Tamanho por Source Map

Analisador de Tamanho por Source Map

Atribua os bytes de um bundle aos arquivos e pastas de origem que os produziram, usando seu arquivo .map — veja o que realmente ocupa espaço.

Ferramenta de Visualização 3D

Ferramenta de Visualização 3D

Inspecione um modelo com dez modos de sombreamento de diagnóstico: normais, xadrez UV, densidade de triângulos, wireframe e mais.

Visualizador de Arquivos de Bordado

Visualizador de Arquivos de Bordado

Abra um arquivo de bordado DST, EXP, JEF, PES ou PEC e veja os pontos, as dimensões reais em mm e polegadas, e as cores de linha usadas.

Visualizador de Furação Excellon

Visualizador de Furação Excellon

Inspecione um arquivo de furação NC (Excellon) sozinho: tabela de ferramentas com tamanhos em mm e polegada, contagem de furos e rasgos, status de metalização e um gráfico 2D de cada furo.

vCard QR gerador

vCard QR gerador

criar a contact card QR código that phones can escanear para add contacts directly.

Visualizador CSV

Visualizador CSV

Visualize e explore arquivos CSV em uma interface de tabela.

apps

Mais ferramentas

Explore nossa colecao completa de ferramentas online gratuitas.

O que esta ferramenta encontra

Sites modernos entregam um único arquivo JavaScript construído a partir de centenas de arquivos-fonte. Esta ferramenta olha dentro desse arquivo e tenta recuperar os limites de módulo originais — agnóstica quanto ao empacotador, usando a forma real do AST em vez de correspondência de texto, que se quebra assim que o código é minificado.

Ela tenta, nesta ordem:

  1. Forma function-map do webpack — uma IIFE cujo argumento é um objeto ou array em que cada entrada é uma função (module, exports, require). Isso também detecta o clássico envoltório webpackUniversalModuleDefinition, não importa quão fundo esteja a chamada real do mapa de módulos.
  2. Forma chunk-push do webpack — (self.webpackChunkXxx = self.webpackChunkXxx || []).push([ids, {modules}, runtime]), a forma que o code-splitting do webpack 5 produz.
  3. Comentários do Rollup / esbuild / Vite — alguns builds não minificados dessa família mantêm um comentário de linha // caminho/para/arquivo.js antes do código de cada módulo. Quando presentes, eles se tornam os limites de módulo.
  4. Alternativa honesta — se nada disso for encontrado (quase sempre porque o bundle é um build minificado e com escopo achatado do Rollup/esbuild/Vite, sem marcadores de limite), a ferramenta avisa e lista as declarações de nível superior do arquivo em vez de inventar uma lista de módulos.

Como ler o resultado

Quando módulos são encontrados, cada um lista o que ele require() por id de módulo literal e, tão útil quanto, quais outros módulos o requerem — assim é possível rastrear "se eu remover isso, o que quebra" em qualquer direção sem executar nada.

Honestidade por design

Requires dinâmicos (require(variavel)) e chamadas import() não podem ser resolvidos estaticamente, então simplesmente são deixados de fora da lista de dependências — isso pode subcontar dependências, mas nunca fabricará uma. Da mesma forma, um id de módulo referenciado por um require() que não está no mapa detectado ainda é mostrado como alvo de uma aresta, mesmo sem ter cartão próprio; normalmente isso significa que ele vive em outro chunk que não foi colado aqui.

Privacidade

Tudo roda no seu navegador usando um analisador JavaScript real (acorn). O bundle que você cola ou envia nunca é enviado a lugar nenhum.