Tiny Online Tools
Para onde foram todos esses bytes?
Um bundle de produção é um único arquivo minificado gigantesco. Saber que ele tem 340 KB não diz nada sobre o porquê — e essa é a pergunta que realmente importa quando você está tentando reduzi-lo. Esta ferramenta responde diretamente a isso: carregue o bundle e seu arquivo .map, e cada byte é atribuído ao módulo de origem que o produziu.
Como funciona a atribuição
Os mapeamentos de um source map dizem "a coluna gerada 4110 veio de src/utils/format.js". Esta ferramenta percorre cada mapeamento do arquivo, em ordem, e mede a distância até o próximo na mesma linha gerada — essa distância é o trecho de código gerado creditado à origem daquele mapeamento. É a mesma aproximação em nível de linha usada pela conhecida ferramenta de linha de comando source-map-explorer, e ela é honesta sobre ser uma aproximação: dois tokens adjacentes na mesma linha gerada sem nada mapeado entre eles (um espaço perdido, um caractere inserido pelo minificador) caem em sua própria categoria de não mapeado, em vez de serem silenciosamente atribuídos a uma origem vizinha.
Os bytes estruturais — as quebras de linha entre linhas geradas — também têm sua própria categoria, pelo mesmo motivo: pertencem à estrutura do arquivo, não a nenhum módulo específico.
A verificação de reconciliação
Cada execução mostra um resultado literal: X bytes atribuídos de Y bytes totais, junto com as contagens de não mapeado e estrutural, e se atribuído + não mapeado + estrutural é exatamente igual ao comprimento total do arquivo. Não é um detalhe cosmético — é a garantia de que nenhum byte foi silenciosamente perdido ou contado duas vezes, e você pode verificar isso por conta própria em vez de confiar na palavra da ferramenta.
Por arquivo ou por pasta
Alterne entre uma linha por arquivo de origem, ou um resumo por pasta de nível superior — node_modules/lodash soma todos os arquivos que o lodash contribuiu, então você pode ver "quanto essa dependência realmente custou" sem rolar antes por quarenta arquivos individuais. Tudo é ordenado por tamanho, do maior para o menor, e a exportação em CSV mantém os mesmos números para análises posteriores.
Privacidade
Ambos os arquivos são lidos e processados inteiramente no seu navegador. Nada é enviado.