consolelog.tools

Bundle Analyzer Visualizer

Paste a build's file list and get a visual size treemap, per-type breakdown, performance-budget checks, gzip estimates and a build-to-build size diff.

About this ToolHow it works, benefits & use cases

The Bundle Analyzer Visualizer turns a build's file list into a live size visualization — paste your assets and the breakdown, budget checks and gzip estimates update instantly, with no Analyze button to click. Input is auto-detected: it accepts `name,size[,gzip]` lines, a JSON array of { name, size, gzipSize? } objects, or raw `next build` / webpack-stats output, and sizes may use B/KB/MB units. It sums total raw and gzip bytes, groups files by type (JavaScript, CSS, Images, Fonts, Other) with a colored legend, and renders a treemap of every file as a horizontal bar proportional to its raw size, sorted largest first. When a file omits its gzip figure the tool estimates one per type (JS ≈ 32%, CSS ≈ 20%, images ≈ 98%, fonts ≈ 75%), marking estimates with a ~. Set a Total JS and per-file budget (in KB) to get a pass/fail card listing every violation. A Compare-builds mode diffs two file lists by name, flagging what was added, removed, grew or shrank. A copyable plain-text report captures everything, and the full input is encoded into a shareable URL.

How to Use

  1. 1Pick a mode: "Analyze" for a single build, or "Compare builds" to diff a before and after.
  2. 2Paste your bundle file list (or click "Load example") — it auto-detects CSV name,size[,gzip] lines, a JSON array, or raw next build / webpack-stats output.
  3. 3In Compare mode, paste the second build into "Build B (after)"; files are matched by name.
  4. 4Optionally set a Total JS budget and a per-file budget in KB (leave blank or 0 to disable a check).
  5. 5Read the live totals, per-type legend, treemap and budget card, then copy or download the report or share the URL.

Key Benefits

  • Live, reactive output — totals, treemap and budget checks update as you type, with no button to press
  • Flexible auto-detected input: name,size[,gzip] lines, a JSON array, or raw next build / webpack-stats output with B/KB/MB units
  • Treemap bars for every file, colored by type and sorted largest first, plus a per-type (JS/CSS/img/font/other) rollup
  • Per-type gzip estimates (JS ≈ 32%, CSS ≈ 20%, images ≈ 98%, fonts ≈ 75%) marked with ~ when not supplied
  • Performance budgets: set a Total JS and per-file limit in KB for a pass/fail card listing each violation
  • Compare-builds mode diffs two file lists by name, showing what was added, removed, grew or shrank with byte deltas
  • Copyable, downloadable text report and a fully shareable URL that reproduces the exact analysis

Common Use Cases

  • Visualizing which files dominate a webpack or Next.js build by raw size
  • Wiring a Total JS / per-file budget into review to flag regressions before they ship
  • Comparing two builds to see exactly which chunks grew, shrank, were added or removed
  • Spotting heavy JS files over 200 KB or an oversized image/font share to target for splitting
  • Generating a shareable, copyable size summary for a performance review
Files
8
Raw
839.84 KB
Gzip
226.76 KB
Over budget · 2 violations
  • Total JS839.84 KB / 500.00 KB (+339.84 KB)
  • vendor.js439.45 KB / 244.00 KB (+195.45 KB)
JavaScript · 839.84 KB

Size breakdown

Bars are proportional to raw size and sorted largest first.

  • vendor.js439.45 KB · 52.3%
  • main.js175.78 KB · 20.9%
  • polyfills.js92.77 KB · 11.0%
  • home.chunk.js43.95 KB · 5.2%
  • about.chunk.js31.25 KB · 3.7%
  • contact.chunk.js27.34 KB · 3.3%
  • utils.js17.58 KB · 2.1%
  • runtime.js11.72 KB · 1.4%

Accepts name,size[,gzip] lines, a JSON array, or raw next build / webpack-stats output. Sizes may use B/KB/MB units.

Performance budgets

Set limits (in KB) to flag regressions. Leave blank or 0 to disable a check.

Copyable plain-text summary

Bundle Analysis Report
============================================
Files:        8
Total (raw):  839.84 KB
Total (gzip): 226.76 KB
JS (raw):     839.84 KB
Budget:       FAIL (2 violations)

By type:
  JavaScript   8 file(s)   839.84 KB  (100.0%)

Biggest files:
  vendor.js  439.45 KB (gz 118.65 KB)
  main.js  175.78 KB (gz 47.46 KB)
  polyfills.js  92.77 KB (gz 25.05 KB)
  home.chunk.js  43.95 KB (gz 11.87 KB)
  about.chunk.js  31.25 KB (gz 8.44 KB)
  contact.chunk.js  27.34 KB (gz 7.38 KB)
  utils.js  17.58 KB (gz 4.75 KB)
  runtime.js  11.72 KB (gz 3.16 KB)

Over budget:
  Total JS: 839.84 KB > 500.00 KB (over by 339.84 KB)
  vendor.js: 439.45 KB > 244.00 KB (over by 195.45 KB)

Recommendations:
  • Total JS is 839.84 KB (raw). Aim for under ~150 KB gzipped on the initial route via code splitting.
  • 1 JS file(s) exceed 200 KB (vendor.js). Split or lazy-load these.
  • Enable Brotli/gzip on the server; raw bytes overstate what users actually download.
  • Tree-shake unused exports and audit large dependencies with a source-map explorer.

Why bundle size matters

Every kilobyte of JavaScript has to be downloaded, parsed and executed before a page becomes interactive — on mid-range phones that cost is roughly 10× the cost of the same bytes of an image. Trimming the bundle is one of the highest-leverage ways to improve Largest Contentful Paint and Time to Interactive.

Gzip vs raw:browsers download the compressed (gzip/Brotli) payload, so that figure is what users feel. JavaScript typically compresses to about a third of its raw size; already-compressed images barely shrink. When you don't supply a gzip column this tool estimates it per file type (marked with ~).

Budgets:a performance budget is a hard ceiling you agree never to cross — e.g. ≤ 150 KB gzipped of JS on the initial route. Wiring the budget check into CI turns a vague "keep it small" into a build that fails when a dependency bloats it.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Related tools