Popular Web Code tools

• Accessibility CheckerScan HTML for WCAG accessibility issues with AI-powered fix suggestions.
• URL Encoder/DecoderEncode, decode, and parse URLs and query strings instantly.
• SQL FormatterFormat, minify, and validate SQL queries with dialect support.
• Color ConverterConvert colors between HEX, RGB, HSL, oklch, CMYK, and 16+ formats instantly.
• HTML FormatterFormat, minify, and validate HTML with attribute sorting and template support.

How to Bundle Size Analyzer Online

1. 1

   Choose your input mode in the top selector: 'Webpack Stats' for webpack/Next.js stats.json, 'Source Map Explorer' for source-map-explorer JSON output, or 'package.json' for dependency weight estimates.

2. 2

   Generate the stats JSON in your project. For Webpack or Next.js, run `npx webpack --json > stats.json` (or configure `@next/bundle-analyzer`). For Source Map Explorer, run `npx source-map-explorer --json dist/main.js > sme.json`. For package.json mode, copy your root `package.json` file.

3. 3

   Paste the JSON into the editor or click 'Upload JSON' in the toolbar to load a file directly from your local filesystem.

4. 4

   Press ⌘↵ (or click 'Analyze') to parse the bundle. The tool processes AST module trees, chunks, and nested package hierarchies instantly in your browser.

5. 5

   Explore the Overview tab to inspect total bundle size, estimated gzip footprint, top heavy npm packages, and the third-party vs. application code ratio.

6. 6

   Switch to the Treemap tab for an interactive squarified visualization. Click any package or folder block to zoom into its constituent modules, and click the breadcrumbs to navigate back.

7. 7

   Open the Modules tab to search, filter, and sort modules by raw size, gzip size, package name, or chunk assignment.

8. 8

   Inspect the Suggestions tab to review automated rule-based optimizations, including lighter package replacements (e.g. moment to date-fns), duplicate package warnings, and CJS tree-shaking flags.

9. 9

   Identify duplicate dependencies in the Duplicates list, noting the wasted bytes caused by conflicting nested transitive version requirements.

10. 10

    Share your analysis configuration or bookmark the URL — active tabs and input states are synchronized automatically in your browser session.

Bundle Size Analyzer Features

• ✓

  Webpack Stats JSON Ingestion: Parses full compilation metadata from Webpack 4 & 5, including concatenated module groups, assets, chunks, and entry points.

• ✓

  Source Map Explorer Integration: Extracts exact parsed file byte sizes from production source maps via source-map-explorer JSON exports.

• ✓

  Package.json Dependency Weight Estimator: Evaluates project dependencies against built-in size heuristics to forecast bundle weight before compiling.

• ✓

  Squarified Treemap Visualization: Proportional hierarchical layout maintaining readable aspect ratios for rapid visual bottleneck identification.

• ✓

  Interactive Zoom & Drill-Down: Click any node in the treemap to navigate into nested folders and individual module files with breadcrumb history.

• ✓

  Duplicate Package Detection: Pinpoints conflicting versions of identical libraries nested across node_modules with exact wasted byte calculations.

• ✓

  Lighter Alternative Recommendations: Suggests drop-in replacements with quantified byte savings for heavy libraries (e.g., moment.js, lodash, jQuery, ramda, core-js).

• ✓

  Tree-Shaking & CJS Module Diagnostics: Detects non-tree-shakeable CommonJS (CJS) or UMD module paths and suggests modern ESM entry points.

• ✓

  Code-Splitting Candidate Identification: Flags individual libraries and modules exceeding 200 KB for dynamic import() route-level splitting.

• ✓

  Sortable & Filterable Module Table: Real-time search by filename or package name with multi-column sorting across raw and gzipped bytes.

• ✓

  Vendor vs. Application Code Ratio: Visual indicator measuring the proportion of third-party dependencies versus authored business logic.

• ✓

  Gzip Size Heuristics: Computes compressed payload estimates across every module and package to model real-world network transfer costs.

• ✓

  Paginated Performance Engine: Smooth rendering and pagination handling hundreds of modules without UI lag or memory degradation.

• ✓

  AI-Powered Bundle Triage: Integrated AI assistant ready to explain module bloat, recommend code-splitting boundaries, and diagnose bundler configs.

• ✓

  100% Client-Side Privacy: All parsing, tree calculations, and treemap rendering happen strictly in-browser without uploading code to any server.

• ✓

  Keyboard-First Workflow: Fast command shortcuts (⌘↵ to analyze, ⌘⇧K to clear, ⌘⇧C to copy output) for rapid developer iteration.

• ✓

  URL State Persistence: Synchronizes active view state, zoom coordinates, and input modes to browser URLs for bookmarking and sharing.

• ✓

  Direct JSON File Upload: Drag-and-drop or select multi-megabyte stats.json files straight from disk without clipboard performance bottlenecks.

Supported Formats & Dialects

The Bundle Size Analyzer supports 6 syntax formats and dialects for accurate parsing and processing.

Webpack Stats JSON (stats.json)

Standard compilation stats generated by Webpack (`webpack --json > stats.json`) containing complete asset inventories, chunk graphs, module trees, and concatenated module child lists.

Source Map Explorer JSON (sme.json)

Parsed byte-level module mappings generated from production `.map` source maps via `source-map-explorer --json`, capturing the exact compiled and minified size of each source module.

Vite & Rollup Visualizer Stats

JSON output exported from `rollup-plugin-visualizer` (`template: "stats"`) describing tree-shaken ESM graph chunks, dynamic import boundaries, and virtual module allocations.

Next.js Bundle Analyzer (@next/bundle-analyzer)

Webpack compilation outputs emitted during Next.js App Router and Pages Router builds, splitting server components, client boundary bundles, and shared framework chunks.

Package Manifest Estimation (package.json)

Dependency manifest parsing that estimates minified and gzipped bundle footprints for npm packages using verified bundle sizes and scoped package heuristics.

esbuild Metafile JSON (metafile: true)

esbuild compilation metafile mapping inputs, entry points, imports, and output chunk bytes for ultra-fast bundler size audits.

Frequently Asked Questions

How does the squarified treemap algorithm visualize JavaScript bundle hierarchy and weight?

The squarified treemap layout partitions the 2D canvas into nested rectangles whose surface areas are directly proportional to each module or package byte size. Unlike standard slice-and-dice treemaps that produce elongated, hard-to-read slivers, the squarified algorithm iteratively optimizes rectangle aspect ratios toward 1:1 (squares). This makes comparing relative package sizes intuitive, prevents label clipping, and allows seamless interactive zooming into nested directory structures.

How do I generate and extract Webpack stats JSON for bundle analysis?

In any Webpack-based project, execute `npx webpack --json > stats.json` in your terminal, or configure `webpack.config.js` with `stats: "verbose"` or `plugins: [new (require("webpack").StatsWriterPlugin)()]`. For Next.js projects, install `@next/bundle-analyzer` and run `ANALYZE=true next build`, or inspect the `.next/analyze` output. You can then paste or drag-and-drop the generated `stats.json` directly into the analyzer.

How does Bundle Size Analyzer detect duplicate packages across nested node_modules trees?

When dependencies in your dependency tree require incompatible semantic versions of the same library (e.g., library A requires `[email protected]` while library B requires `[email protected]`), package managers (npm, Yarn, pnpm) install multiple copies in nested `node_modules` folders. Bundle Size Analyzer inspects module file paths for nested `node_modules/.../node_modules/` patterns, aggregates duplicate instances of each package, and computes the exact wasted byte count that can be recovered by running `npm dedupe` or configuring package manager resolutions/overrides.

Why do CommonJS (CJS) and UMD dependencies prevent effective tree-shaking in modern bundlers?

Tree-shaking relies on static analysis of ECMAScript Module (ESM) syntax (`import` and `export` statements). CommonJS modules (`require()` and `module.exports`) and UMD wrappers are dynamically evaluated at runtime, making it impossible for bundlers like Webpack, Rollup, or Vite to safely eliminate unused exports without risking runtime exceptions. Bundle Size Analyzer flags CJS and UMD module paths and recommends migrating to ESM-first packages (e.g., using `lodash-es` instead of `lodash`).

How can dynamic import() and code-splitting reduce Largest Contentful Paint (LCP) and Total Blocking Time (TBT)?

When all application features are bundled into a single entry file, browsers must download, parse, and compile the entire JavaScript payload before rendering and hydrating the initial view. By introducing dynamic `import("./HeavyChart")` boundaries, you split heavy or below-the-fold dependencies into separate asynchronous chunks loaded on demand. This shrinks the initial chunk size, reducing main-thread parse time, Total Blocking Time (TBT), and Interaction to Next Paint (INP) latency.

What is the difference between raw size, parsed size, and gzipped / brotli compressed bundle size?

Raw size represents the uncompressed disk size of the generated JavaScript file. Parsed size (reported via source maps) is the size of the JavaScript code as parsed and compiled into the V8/SpiderMonkey AST in browser memory. Gzip and Brotli sizes represent the compressed over-the-wire payload transferred over HTTP/2 or HTTP/3. While gzip reduces network transfer time, the browser must still parse and execute the full uncompressed code — meaning high raw size directly degrades CPU execution and battery life even when compressed.

How do barrel files (index.ts re-exports) accidentally inflate client bundle sizes?

Barrel files (e.g., `export * from "./components"`) aggregate hundreds of internal module exports into a single entry point. If a bundler or library is not configured with `"sideEffects": false` in its `package.json`, importing a single small utility from that barrel file forces the bundler to evaluate and include all imported modules, including unrelated icons, modals, and heavy utilities. Bundle Size Analyzer highlights bloated barrel module groups so you can switch to direct deep imports or configure sideEffects flags.

How can I analyze Vite, Rollup, and esbuild bundles using this tool?

For Vite and Rollup, add `rollup-plugin-visualizer` to your `vite.config.ts` with `visualizer({ template: "stats", filename: "stats.json" })` to generate compatible stats JSON, or generate production source maps (`build: { sourcemap: true }`) and run `npx source-map-explorer --json dist/assets/*.js > sme.json`. For esbuild, configure `metafile: true` and export the compilation metadata. Load any of these outputs into the corresponding input mode in Bundle Size Analyzer.

How do heavy packages like moment.js or lodash affect bundle weight and what lighter alternatives exist?

Monolithic libraries like `moment.js` (~290 KB raw) bundle all internationalization locales and cannot be tree-shaken due to CommonJS architecture. Monolithic `lodash` (~72 KB) bundles hundreds of utilities even if you only use `debounce`. Bundle Size Analyzer suggests modern lightweight alternatives such as `date-fns` (~17 KB) or `dayjs` (~7 KB) for dates, `lodash-es` or native ECMAScript methods for utilities, and `immer` or `structuredClone` for deep object cloning.

How does in-browser client-side bundle analysis protect proprietary codebase security?

Bundle Size Analyzer executes all JSON parsing, AST module extraction, treemap coordinate layout algorithms, and duplicate detection entirely within your local browser memory using client-side JavaScript. Your production source maps, proprietary code structure, internal file paths, and package manifests are never transmitted to external servers, cloud databases, or telemetry platforms, ensuring compliance with enterprise security and privacy standards.

Related Developer Tools

• Source Map ExplorerResolve minified stack traces back to original source code using source maps.
• JS Minifier / BeautifierFormat, minify, and validate JavaScript code instantly.
• Tech Stack DetectorDetect frameworks, CMS platforms, analytics, and server technologies used by any website.
• CSS Animation GeneratorGenerate CSS keyframe animations with visual preview and easing functions.
• Image CompressorCompress and optimize images to reduce file size without noticeable quality loss.
• Stack Trace AnalyzerParse, format, and analyze error stack traces with root cause isolation.
• PWA Manifest & Service Worker AuditValidate manifest.json, inspect service worker config, and flag installability issues.
• SVG OptimizerOptimize, minify, and clean SVG files with configurable SVGO presets.