Webpack Bundle Analyzer CLI
Webpack Bundle Analyzer CLI reads build statistics and shows module sizes in JavaScript bundles before and after compression.
- 12,654 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Analysis reads build files and can serve reports containing module names and paths over HTTP.
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add cli/webpack-bundle-analyzer-cliDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Analysis reads build files and can serve reports containing module names and paths over HTTP.
This is third-party code. Review the repository files before installing.
What it does
Each module appears as a rectangle in the browser report, with area determined by the selected size metric. Expanding a large region reveals the dependency occupying that space. The sidebar and context menu hide unrelated chunks to focus on a chosen bundle. The standalone CLI reads Webpack stats JSON and built bundle files. View its report through a local HTTP server or save HTML for review. The analyzer shows build composition; it neither changes imports nor measures page speed. Developers investigate those separately.
Who it is for. Webpack frontend engineers investigating build growth and individual module contributions.
Good fit when
- A dependency update increased bundle size and the cause is hidden among modules.
- A finished build includes a package the team did not expect.
- A reviewer wants a build-size report that opens without a server.
- A developer compares minified output with its compressed size.
Not a fit when
- You need LCP or runtime measurements rather than bundle composition.
- Webpack statistics and matching bundle files are unavailable.
- The report must automatically repair imports and code splitting.
Example request
Inspect stats.json and its matching build, identify large modules and propose checks without changing dependencies.Limitations
A full report requires `stats.json` and bundle files from the same build; without files on disk, the analyzer may show only `stat`. Select the same metric when comparing reports: `parsed` and `gzip` measure different representations of the code. Server mode listens on `127.0.0.1` by default; another address can expose the report to the network. The map contains module names and project paths, so confirm the recipient may see them before sharing HTML.
How to disable. Stop the analyzer and remove its build plugin if enabled. Manage saved HTML and JSON reports separately.
FAQ
Is there a CLI without the plugin?
Yes. For example, `webpack-bundle-analyzer bundle/output/path/stats.json` opens a report from prepared statistics. Substitute your build path.
How does `parsed` differ from `stat`?
`stat` comes from Webpack statistics and describes size before transformations such as minification. `parsed` measures the resulting code before gzip or Brotli. If the build is minified, `parsed` already includes that change.
How do I save an HTML report?
Add `--mode static` to the CLI call. The analyzer creates `report.html` without an HTTP server; use `--report` for another path. Supply statistics and bundles from the same build.
Does gzip size measure network speed?
No. It measures code size after gzip compression. Transfer speed and page performance need separate measurements.
What if PowerShell produces invalid stats.json?
Generate a file without a BOM using the README PowerShell command: `webpack --profile --json | Out-file 'stats.json' -Encoding OEM`.
Discussion
No questions or reviews yet.
Related
CLI toolsRockpack Starter is a React CLI with app and library templates built around TypeScript and extensible Webpack configuration.
56 JavaScript snippets for web performance: the agent runs them through skills, MCP or CLI and reasons over the result
Chef for Bitrix
Chef
CLI for building, testing, linting and diagnosing Bitrix JS extensions with TypeScript support
An accessibility scanner for agents and CI: renders a page in Chromium with axe-core or lints React, Vue and Angular source.
A set of skills for web quality audits: performance, Core Web Vitals, accessibility, SEO and best practices from Lighthouse
designlang
designlang (design-extract)
A CLI and MCP server that reads a live website and pulls out its design system: DTCG tokens, a Tailwind config, Figma variables and a brand book
README in short
The `--exclude` option removes matching files from the report using a regular expression. The bundle directory can be supplied separately from the stats JSON path.