Bundle Size Analyzer Online — Visualize & Optimize JS Bundle Sizes

How to Bundle Size Analyzer Online

1. 1

   Choose your input mode from the dropdown in the bottom bar: 'Webpack Stats' for webpack stats JSON, 'Source Map Explorer' for source-map-explorer output, or 'package.json' for a dependency size estimate.

2. 2

   Generate your input data. For webpack stats, run 'npx webpack --json > stats.json' in your project. For source-map-explorer, run 'npx source-map-explorer --json dist/main.js > sme.json'. For package.json mode, copy your package.json file.

3. 3

   Paste the JSON into the input area, or click 'Upload JSON' in the bottom bar to load a file directly from disk.

4. 4

   Press ⌘↵ (or click the Analyze button) to run the analysis. Results appear instantly in the output panel.

5. 5

   Explore the Overview tab for total bundle size, gzip estimate, top packages bar chart, and node_modules vs app code ratio.

6. 6

   Switch to the Treemap tab for an interactive proportional visualization. Click any block to zoom into that package or directory, and use the breadcrumb navigation to zoom back out.

7. 7

   Open the Modules tab to browse a sortable, filterable table of all modules. Sort by size, gzip size, or package name to identify heavy files quickly.

8. 8

   Review the Suggestions tab for rule-based optimization recommendations. Each suggestion shows severity (HIGH/MED/LOW), estimated byte savings, and the affected modules.

9. 9

   Use the AI sidebar (if enabled) to ask questions like 'Why is my bundle so large?' or 'How should I code-split this?' for context-aware advice.

10. 10

    Share or bookmark your analysis by saving the input to localStorage — the tool automatically persists your last input across sessions.

Bundle Size Analyzer Features

• ✓

  Webpack stats JSON parser: reads the full output of 'webpack --json', including nested module concatenation groups, to give an accurate per-file size breakdown.

• ✓

  Source Map Explorer support: parse the JSON output of source-map-explorer to get exact parsed sizes per module from production source maps.

• ✓

  Package.json dependency estimation: enter your package.json and get estimated bundle sizes for all dependencies based on a built-in lookup table of 30+ popular packages.

• ✓

  Interactive squarified treemap: a custom CSS-based treemap layout (no D3 dependency) renders package sizes proportionally. Click any block to zoom in; breadcrumbs let you navigate back.

• ✓

  Zoom and drill-down: click into any package or directory in the treemap to explore its individual modules at a deeper level.

• ✓

  Sortable module table: browse all modules with columns for name, package, raw size, estimated gzip size, and percentage of total bundle. Sort by any column ascending or descending.

• ✓

  Module search/filter: type in the filter box to instantly narrow the module list by name or package name.

• ✓

  Paginated module list: large bundles with hundreds of modules are paginated at 50 rows per page for smooth performance.

• ✓

  Package aggregation: modules are grouped by npm package name to show total package size, module count, and percentage of bundle.

• ✓

  Duplicate package detection: identifies when the same package appears nested under multiple node_modules directories (version conflicts), showing wasted bytes.

• ✓

  Rule-based optimization suggestions: automatically generates actionable suggestions for large packages, duplicates, CJS/UMD imports, and high node_modules ratios.

• ✓

  Lighter-alternative lookup: for heavy packages like moment, lodash, jQuery, and D3, suggests smaller alternatives (date-fns, lodash-es, native APIs, etc.) with estimated byte savings.

• ✓

  Code-splitting suggestions: packages over 200 KB trigger dynamic import suggestions with estimated savings if lazy-loaded.

• ✓

  Tree-shaking suggestions: detects CJS/UMD module paths and suggests switching to ESM entry points for better tree-shaking.

• ✓

  Gzip size estimation: estimates compressed size using a 33% compression ratio heuristic — clearly labelled as an estimate, not an exact measurement.

• ✓

  node_modules ratio indicator: visual progress bar showing what percentage of your bundle is third-party dependencies vs. your own application code.

• ✓

  Severity badges: optimization suggestions are rated HIGH, MED, or LOW by severity based on potential byte savings and impact.

• ✓

  AI-enhanced analysis: the built-in AI sidebar (Explain, AutoFix, Suggest) can answer specific questions about your bundle's contents and optimization strategies.

• ✓

  Runs entirely in your browser: no bundle data, package.json, or stats files are ever sent to a server. Analysis is 100% client-side.

• ✓

  500-module safety limit: for very large bundles, the visualization uses the first 500 modules to keep the UI responsive, while size totals still reflect the full bundle.

• ✓

  File upload support: click 'Upload JSON' to load any .json stats file directly from disk without copying and pasting.

• ✓

  URL state persistence: input mode and active tab are persisted in the URL via nuqs for bookmarkable, shareable analysis sessions.

• ✓

  localStorage persistence: your last bundle stats input is automatically saved and restored across browser sessions.

• ✓

  Keyboard shortcuts: ⌘↵ to analyze, ⌘⇧K to clear — optimized for developer workflows.

Frequently Asked Questions

What is a bundle size analyzer?

A bundle size analyzer is a tool that shows you exactly how much space each JavaScript module, package, or file occupies in your production bundle. It helps you identify the heaviest dependencies, find unused code, detect duplicate packages, and discover opportunities to reduce bundle size through code splitting, tree shaking, or replacing heavy libraries with lighter alternatives.

What input formats does the Bundle Size Analyzer support?

Three formats are supported: (1) Webpack stats JSON — generated by running 'npx webpack --json > stats.json' or by using the webpack-bundle-analyzer plugin; (2) source-map-explorer JSON — generated by running 'npx source-map-explorer --json dist/main.js > sme.json'; and (3) package.json — paste your package.json and the tool estimates sizes for each listed dependency using a built-in lookup table.

How do I generate webpack stats JSON?

Run 'npx webpack --json > stats.json' in your project's root directory to capture the full webpack stats output. For Next.js projects, you can use the '@next/bundle-analyzer' package. For Create React App, add the 'GENERATE_SOURCEMAP=true' environment variable and analyze the output. The stats file can be large (several MB) for complex projects — the analyzer handles files up to 1 MB.

How do I generate source-map-explorer JSON?

First install source-map-explorer: 'npm install -g source-map-explorer'. Then run 'npx source-map-explorer --json dist/main.js > sme.json' (replace dist/main.js with your actual bundle path). Source maps must be available (either inline or as .map files). The JSON output contains exact parsed sizes for each module based on the source map data.

Is my bundle data sent to any server?

No. All bundle analysis runs entirely in your browser using client-side JavaScript. Your stats JSON, package.json, and source map data never leave your machine. The optional AI suggestions feature communicates with your configured AI provider but only receives the text you explicitly send through the AI sidebar — it does not automatically upload your bundle data.

How accurate are the gzip size estimates?

The gzip estimates use a conservative 33% compression ratio heuristic (JavaScript typically compresses to 30-40% of its original size). These are approximations — actual gzip sizes depend on the specific content, compressor settings, and whether brotli is used instead. For exact sizes, check your build tool's output, run 'gzip -l yourfile.js', or use source-map-explorer which can report parsed sizes from actual source maps.

What is a squarified treemap and how do I use it?

A treemap is a space-filling visualization where each package or module is represented as a rectangle proportional to its size. Larger rectangles mean larger file sizes. The squarified algorithm keeps rectangles as close to square as possible for readability. Click any block to zoom into that package and see its individual files. Use the breadcrumb navigation at the top to zoom back out to the full bundle view.

What does the duplicate package detection do?

Duplicate detection finds packages that appear more than once in nested node_modules directories — typically caused by conflicting version requirements between dependencies. For example, if your app requires react@18 and a dependency requires react@17, both versions may be bundled. The tool shows how many bytes are wasted by duplication and suggests running 'npm dedupe' or 'yarn dedupe' to resolve conflicts.

Why is there a 500-module limit in the visualization?

For performance reasons, the treemap and module table display the first 500 modules when a bundle is very large. All size totals, package aggregations, and optimization suggestions still consider the full bundle. A 'truncated' note is shown when the limit is hit. For complete analysis of large bundles, use a dedicated tool like webpack-bundle-analyzer or source-map-explorer with your actual source maps.

What optimization suggestions does the tool generate?

The tool generates six types of suggestions: (1) Replace — suggests lighter alternatives for known heavy packages like moment (→ date-fns), lodash (→ lodash-es), jQuery (→ native DOM), and others; (2) Code-split — suggests dynamic import() for packages over 200 KB; (3) Dedupe — flags duplicate packages with wasted byte count; (4) Tree-shake — detects CJS/UMD module builds and suggests ESM equivalents; (5) Externalize — suggests CDN externalization when node_modules exceed 80% of bundle. Each suggestion includes an estimated byte saving.

What is tree shaking and how do I fix CJS import warnings?

Tree shaking is the process of removing unused code from your bundle. It only works with ES modules (ESM), not CommonJS (CJS). If a package ships only a CJS build (paths with /cjs/, /commonjs/, or /umd/), the entire package is included in your bundle even if you only use a small part of it. The fix is to import from the ESM entry point — for example, import from 'lodash-es' instead of 'lodash', or use 'import { format } from 'date-fns'' instead of the legacy CommonJS import.

How does the package.json estimation mode work?

In package.json mode, the tool reads your dependencies and devDependencies, then looks up known sizes for 30+ popular packages (React, lodash, moment, axios, etc.) from a built-in table. Unknown packages are estimated using a size formula based on package type. These are rough estimates for planning purposes — use webpack stats or source-map-explorer mode for accurate production measurements.

Can I analyze Next.js, Vite, or Rollup bundles?

Yes, with the right export format. For Next.js, use '@next/bundle-analyzer' which generates webpack-compatible stats. For Vite, use the 'rollup-plugin-visualizer' with 'template: stats' to get a compatible JSON. For Rollup, the 'rollup-plugin-visualizer' also works. In source-map-explorer mode, any bundle with source maps works regardless of the build tool.

Why is moment.js flagged as a heavy dependency?

moment.js is 290 KB minified (about 70 KB gzipped) and cannot be tree-shaken because it uses a CJS module format. For most use cases, 'date-fns' (tree-shakeable, ~17 KB for typical usage) or 'dayjs' (~7 KB) are drop-in replacements. If you only need a few date formatting operations, the native Intl.DateTimeFormat API (zero KB) may be sufficient.

Does this replace webpack-bundle-analyzer?

This tool is complementary, not a full replacement. webpack-bundle-analyzer provides a richer interactive treemap with more detail and is tightly integrated into your webpack build process. This DevFlow tool adds value for quick online analysis, package.json estimation, rule-based optimization suggestions, and AI-assisted explanations — without requiring a local installation or build step.

Related Developer Tools

• JS Minifier / BeautifierFormat, minify, and validate JavaScript code instantly.
• JSON FormatterPrettify, minify, and validate JSON data instantly.
• JSON to TypeScript & Schema GeneratorGenerate TypeScript interfaces, Zod schemas, and Valibot schemas from JSON.
• SVG OptimizerOptimize, minify, and clean SVG files with configurable SVGO presets.