Webpack Bundle Size Visualizer
Paste a webpack stats JSON (generated with webpack --json) and instantly visualize which modules and packages contribute most to your bundle size. Switch between package, module, and chunk views. Get actionable optimization recommendations for the largest dependencies. All analysis runs in your browser — your stats file never leaves your device. No signup required.
Paste a webpack stats JSON (generated with webpack --json) and visualize module sizes — see which dependencies contribute most to your bundle. All analysis runs locally in your browser. Your stats file never leaves your device.
Generate with: webpack --json > stats.json or next build --debug
Why Use Our Webpack Bundle Size Visualizer?
Instant Webpack Bundle Visualization
Visualize webpack bundle sizes instantly in your browser — no server upload, no build tools required. Our webpack bundle size visualizer parses your stats JSON and renders interactive size bars for packages, modules, and chunks.
Secure Webpack Bundle Size Visualizer Online
Your webpack stats JSON never leaves your device when you use this webpack bundle size visualizer. 100% client-side processing means complete privacy — no cloud storage, no server logs, no source code exposure.
Webpack Bundle Size Visualizer — No Installation
Visualize webpack bundle sizes directly in your browser with no npm packages, no webpack-bundle-analyzer setup, and no account required. This free webpack bundle size visualizer works on any modern browser.
Optimization Recommendations & Package Analysis
Get actionable optimization recommendations for your top dependencies — moment.js, lodash, d3, MUI, chart.js, and more. See bundle composition (node_modules vs app code) and per-package size contribution.
Common Use Cases for Webpack Bundle Size Visualizer
Bundle Size Budget Enforcement
Use the webpack bundle size visualizer to check whether your bundle fits within your performance budget before each deployment. See which packages are the largest contributors and identify regressions early.
Dependency Audit & Replacement
Use the webpack bundle size visualizer to identify oversized dependencies like moment.js (290 KB) or lodash (71 KB). The optimization recommendations panel suggests lighter alternatives for the most common offenders.
Tree-Shaking Verification
Use the webpack bundle size visualizer to verify that tree-shaking is working correctly. If a package shows many small modules instead of one large bundle, tree-shaking is active and working as expected.
Core Web Vitals Optimization
Use the webpack bundle size visualizer to identify the largest JavaScript bundles affecting your LCP and FID scores. Reducing the main bundle size directly improves Time to Interactive and First Input Delay.
Client Performance Reports
Use the webpack bundle size visualizer to generate bundle composition data for client performance reports. Show node_modules vs app code split, top packages by size, and specific optimization opportunities.
Code Splitting Analysis
Use the webpack bundle size visualizer to analyze chunk sizes and identify opportunities for code splitting. The chunk view shows which chunks are largest and how many modules each chunk contains.
Understanding Webpack Bundle Size Analysis
What is a Webpack Bundle Size Visualizer?
A webpack bundle size visualizerparses the JSON output of webpack's stats API and renders a visual breakdown of which modules and packages contribute most to your bundle size. Our webpack bundle size visualizer reads the modules, chunks, and assets arrays from the webpack stats JSON and aggregates module sizes by package name — showing you exactly whichnode_modules dependencies are the largest. All analysis runs entirely in your browser using pure JavaScript — no server upload, no webpack-bundle-analyzer installation required.
How Our Webpack Bundle Size Visualizer Works
- 1Generate your webpack stats JSON: Run
webpack --json > stats.jsonornext build --debug. Then paste the contents of stats.json into the input area, or upload the file directly. - 2Instant browser-based analysis:Click "Visualize Bundle" and the webpack bundle size visualizer parses the JSON, aggregates module sizes by package name, and renders size bars for packages, modules, and chunks. No data is sent to any server.
- 3Review the visualization and recommendations: Switch between package, module, and chunk views. The optimization recommendations panel provides specific suggestions for the largest dependencies in your bundle.
What the Webpack Bundle Size Visualizer Shows
- Bundle Composition: A visual bar showing the split between
node_modules(third-party dependencies) and app code — most bundles are 70–90% node_modules, which is the primary optimization target. - Package View: All
node_modulespackages aggregated by name and sorted by total size — shows which dependencies contribute most to your bundle. - Module View: The top 20 individual modules by size — useful for identifying specific files that are unexpectedly large.
- Chunk View: All webpack chunks sorted by size — useful for identifying code splitting opportunities and understanding your bundle structure.
How to Generate Webpack Stats JSON
For webpack: run webpack --json > stats.json or add { stats: 'verbose' } to your webpack config. For Next.js: run next build --debug and look for the stats file in .next/. For Create React App: use source-map-explorer or eject to access webpack config. The webpack bundle size visualizer accepts any webpack stats JSON — the format is consistent across webpack 4 and webpack 5.
Related Tools
JSON Key Shortener
Shorten verbose JSON keys to single letters or abbreviated forms — shows size reduction and provides a downloadable key mapping file for restoration. Free online JSON key shortener.
JSON vs MessagePack Size Comparison
Compare JSON byte size vs MessagePack encoding for any payload — shows exact savings, type-by-type breakdown, and MessagePack hex preview. Free online JSON vs MessagePack comparison.
String Decompressor (GZIP/LZ)
Decompress GZIP+Base64, DEFLATE+Base64, and LZ-String compressed payloads back to readable text — supports all three LZ-String variants. Free online string decompressor.
ZIP File Extractor
Extract files from any ZIP archive client-side — browse contents, preview text files, download individual files or all at once. Free online ZIP extractor, no signup required.
Frequently Asked Questions About Webpack Bundle Size Visualizer
A webpack bundle size visualizer parses the JSON output of webpack's stats API and renders a visual breakdown of which modules and packages contribute most to your bundle size. Our free webpack bundle size visualizer works entirely in your browser — your stats file never leaves your device.
Run "webpack --json > stats.json" in your project directory. For Next.js, run "next build --debug". For Create React App, use source-map-explorer or eject to access webpack config. The webpack bundle size visualizer accepts any webpack 4 or webpack 5 stats JSON.
Absolutely. The webpack bundle size visualizer processes everything locally in your browser. Your stats JSON is never uploaded to any server, never stored, and never leaves your device — completely safe for proprietary codebases.
Yes — 100% free, forever. No signup, no account, no premium tier, no file size limits, and no ads interrupting your workflow.
Module size is the uncompressed size of an individual JavaScript module (file). Chunk size is the combined size of all modules in a webpack chunk (output file). A chunk typically contains many modules. The webpack bundle size visualizer shows both views so you can analyze at different levels of granularity.
Most JavaScript bundles are 70–90% node_modules (third-party dependencies) and 10–30% app code. This is normal. The webpack bundle size visualizer helps you identify which specific packages are the largest so you can prioritize optimization efforts.
The most common large dependencies are moment.js (replace with date-fns or dayjs), lodash (use tree-shaking or individual imports), d3 (import only sub-packages), MUI/Material-UI (use named imports), and chart.js (register only needed chart types). The webpack bundle size visualizer provides specific recommendations for these packages.
No — the webpack bundle size visualizer shows uncompressed module sizes as reported by webpack. Actual transfer sizes will be smaller with GZIP (typically 60–80% reduction for JavaScript). Use the GZIP Compression Ratio Checker to estimate wire sizes for individual modules.
Yes — the webpack bundle size visualizer supports both webpack 4 and webpack 5 stats JSON format. The module and chunk data structure is consistent across both versions. It also supports stats JSON from webpack-bundle-analyzer.