Bundle Analyzer Lite: Free Online Webpack Bundle Analyzer — How-To Guide

Big bundles ship slowly. When your web app feels sluggish, the first suspect is usually the JavaScript bundle — a huge vendor chunk, a duplicate dependency, or one oversized asset you never noticed. Bundle Analyzer Lite lets you inspect webpack stats JSON to find large assets, chunks, and module size hotspots, all running locally in your browser. No account, no upload, no install.

Try it free: Bundle Analyzer Lite

What the tool does

Bundle Analyzer Lite is a focused developer utility for inspecting webpack stats files. You paste or load a webpack stats JSON (the output of webpack --json or the stats plugin), and it runs a parser with clear findings: which assets are the biggest, which chunks pull in the most weight, and which modules are the size hotspots.

It is a serious first-pass local tool — paste real input, review the findings, then copy or download the output for your notes or a code review. It is not a replacement for CI checks or production scanners; use it for quick reviews before you run your project's own compiler and CI checks.

Step-by-step: how to use it

1. Generate your webpack stats file. In your project, run something like npx webpack --json > stats.json (or enable the stats output in your build config).
2. Open the tool. Go to Bundle Analyzer Lite in any modern browser.
3. Paste or load the stats JSON. Paste the contents of stats.json into the input area. The tool includes sample input you can try first if you want to see the output format before using real data.
4. Run the analysis. The tool parses the stats and reports findings: large assets, chunk breakdowns, and module-level size hotspots.
5. Review the findings. Look for the largest assets first — a single giant vendor bundle or an unexpectedly large image or library usually explains slow load times.
6. Copy or download the report. Copy the output or download a text report for your debugging notes, code review prep, QA handoff, or documentation.

3 practical tips

Tip 1: Run it on every major release. Bundle size creeps up with every dependency you add. Comparing stats before and after a change catches regressions while they're cheap to fix — split a chunk, tree-shake an import, or swap a heavy library early.

Tip 2: Look for duplicate modules first. Two versions of the same library (or the same utility bundled twice under different chunks) are one of the most common and fixable causes of bloat. Module hotspot views make these stand out.

Tip 3: Verify before regulated production changes. This tool is built for fast local inspection. For production releases — especially in regulated environments — always confirm with your project's own compiler, CI checks, or infrastructure scanner before shipping.

FAQ

Q: Does Bundle Analyzer Lite upload my stats file?
A: No. The normal workflow runs locally in your browser. Your input never leaves your device, which makes it safe for proprietary codebases.

Q: Is this a full replacement for webpack-bundle-analyzer or CI checks?
A: No. It's designed for fast local inspection — quick reviews, debugging notes, code review prep, and QA handoffs. Run your project-specific CI and production scanners before final decisions.

Q: Can I copy or download the analysis result?
A: Yes. Run the tool, then copy the output or download a text report — handy for documenting what changed between builds.

Q: What input does it accept?
A: Webpack stats JSON — the standard output from webpack --json or equivalent stats generation in your build setup.

Privacy note

Bundle Analyzer Lite runs 100% in the browser. Your stats file — which may describe your entire application — is parsed locally on your device and is never uploaded to a server. Free, no account required.

Ready to find what's weighing your bundle down? Try it free: Bundle Analyzer Lite