Tiny Online Tools logoTiny Online ToolssearchSearch tools…grid_viewAll Tools
Homechevron_rightReverse Engineering Toolschevron_rightSource Map Size AnalyzerSource Map Size Analyzer

Source Map Size Analyzer

Attribute a bundle's bytes to the original source files and folders that produced them, using its .map file — see what is actually taking up space.

upload_file

Click to browse or drag & drop files here

Drop a .map file

Accepted: .map,.json

upload_file

Click to browse or drag & drop files here

Drop the generated .js file

Accepted: .js,.mjs,.cjs

Both files are required: attribution needs the actual generated bytes, not just the map.

Similar Tools

JS Bundle Dependency Visualizer

JS Bundle Dependency Visualizer

Find module boundaries inside a webpack, Rollup, esbuild or Vite bundle and see which module requires which — using real AST shape-matching, not text guessing.

Source Map Explorer

Source Map Explorer

Load a .map file and map any generated line and column back to the original file, line and source name it came from.

WASM Size Analyzer

WASM Size Analyzer

Find out which functions and data segments dominate a WebAssembly module's size, with an exact sorted breakdown and a visual treemap.

Webpack Bundle Inspector

Webpack Bundle Inspector

Detects webpack's runtime bootstrap, module map and chunk-push metadata by AST shape, shows each module's real source, and says plainly when a file is not webpack output.

PDF Outline Editor

PDF Outline Editor

Add or replace bookmarks / outlines in a PDF file. Paste a flat list and generate a nested navigable outline tree — free and private.

PDF Grayscale Converter

PDF Grayscale Converter

Convert a color PDF to grayscale by rendering each page and rebuilding the document.

IP Address Validator

IP Address Validator

Validate IPv4, IPv6, and CIDR notation with address type details and subnet information.

apps

More Tools

Browse our full collection of free online tools.

Where did all these bytes go?

A production bundle is one giant minified file. Knowing it's 340 KB tells you nothing about why — which is the question that actually matters when you're trying to cut it down. This tool answers it directly: load the bundle and its .map file, and every byte gets attributed to the original source module that produced it.

How the attribution works

A source map's mappings say "generated column 4110 came from src/utils/format.js." This tool walks every mapping in the file, in order, and measures the gap to the next one on the same generated line — that gap is the span of generated code credited to that mapping's source. It's the same line-level approximation the well-known source-map-explorer CLI tool uses, and it's honest about being an approximation: two adjacent tokens on the same generated line with nothing mapped between them (stray whitespace, a minifier-inserted character) fall into their own unmapped category rather than being silently folded into whichever source happens to be nearby.

Structural bytes — the newlines between generated lines — get their own category too, for the same reason: they belong to the file's structure, not to any one module.

The reconciliation check

Every run shows a literal readout: X bytes attributed of Y total bytes, plus the unmapped and structural counts, and whether attributed + unmapped + structural equals the file's total length exactly. This isn't a cosmetic detail — it's the guarantee that no byte was silently dropped or double-counted, and you can verify it yourself instead of taking the tool's word for it.

Per-file or per-folder

Switch between a row per original source file, or a rollup by top-level folder — node_modules/lodash sums every file lodash contributed, so you can see "how much did this one dependency actually cost" without scrolling past forty individual files first. Everything is sorted by size, largest first, and the CSV export keeps the same numbers for further analysis.

Privacy

Both files are read and processed entirely in your browser. Nothing is uploaded.