What is Bundle Size Analyzer
The Bundle Size Analyzer is a client-side tool that parses JavaScript bundle statistics and displays the size contribution of each module or dependency in a human-readable format. It accepts input in two forms: structured JSON from build tools (webpack stats, Rollup output, or bundlephobia API responses) where each entry has a name/id and size/gzip field, or plain text which it measures as raw byte count. When given structured JSON, it converts each module's size from bytes to kilobytes and displays a sorted list showing which dependencies contribute most to the bundle. When given plain text or non-JSON input, it simply reports the total input size in kilobytes and suggests visiting bundlephobia.com for detailed analysis. This tool is useful for quickly assessing the impact of adding a new dependency — paste the bundlephobia response for a package to see its size contribution relative to your other dependencies. The tool also reports the total number of modules analyzed and the combined size, giving you a complete picture of the bundle composition. For large bundles, this overview helps identify the heaviest dependencies that might be candidates for replacement with lighter alternatives.
How to Use Bundle Size Analyzer
- Step 1: Obtain bundle statistics. Common sources: the webpack --stats output, Rollup's rollup-plugin-visualizer JSON export, or the bundlephobia.com API response for a specific package.
- Step 2: Paste the JSON into the input textarea. The tool accepts arrays of {name, size} objects or single objects.
- Step 3: Click Transform. The output displays each module with its name and size in kilobytes, sorted by size. Modules are padded to 40-character width for alignment.
- Step 4: If the input is not valid JSON or does not contain the expected fields, the tool falls back to measuring the raw input size and suggests visiting bundlephobia.com.
Why Use Bundle Size Analyzer
Bundle size directly impacts page load performance, especially for mobile users on slower connections. Understanding which dependencies contribute most to your bundle is the first step toward optimization. The Bundle Size Analyzer makes this analysis instant — paste your stats output and immediately see the size ranking. This is particularly valuable when evaluating whether to add a new dependency: before importing a package, paste its bundlephobia data alongside your existing bundle stats to see the relative impact. The tool also serves as a quick sanity check: if a utility library you expected to be small turns out to be 200KB, you know to look for a lighter alternative.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.
Frequently Asked Questions
What JSON formats does it accept?
<p>The tool accepts any JSON array where each element has a name/id field and a size/gzip field (in bytes). This matches the output format of webpack stats, Rollup plugins, and the bundlephobia API.</p>
Does it show gzipped or raw sizes?
<p>The tool displays whichever size field is present in the input — if the input uses gzip, it shows gzipped sizes; if it uses size, it shows raw sizes. It converts from bytes to kilobytes for readability.</p>
Can I analyze a bundle I haven't built yet?
<p>Not directly — the tool needs the build output. However, you can paste bundlephobia.com data for individual packages to compare their sizes before deciding whether to include them in your project.</p>
What if my webpack stats output is too large to paste?
<p>You can filter the stats in your webpack config by setting stats: { all: false, assets: true, modules: true } to output only the data this tool needs, reducing the JSON size significantly.</p>