Webpack Bundle Size Analyzer

If you've ever shipped a web app and wondered "why is my code so large?", this tool is for you. It takes the output from Webpack (a tool that bundles code for the web) and shows you a clear breakdown of which libraries and packages are taking up the most space in your final bundle file.

The tool works by reading Webpack's detailed build report and organizing it into a readable tree view. Think of it like opening a folder and seeing which files are biggest — except it shows you this for all your dependencies. You can see that React might be taking 50% of your bundle, a testing library another 10%, and so on. Each item shows both the file size in kilobytes and what percentage of your total bundle it represents. This makes it obvious where to focus if you need to shrink your app's download size.

You can use this in two ways. The simplest is via command line: you tell Webpack to generate a JSON report, pipe it to this tool, and it prints out a tree of your bundle's contents right in your terminal. The second approach is to add it as a plugin to your Webpack configuration file, which automatically saves a size report to a text file every time you build — useful if you want to track how bundle size changes over time or share reports with teammates.

This is most useful for developers who are trying to optimize their app's performance or reduce how long it takes users to download their code. For example, if you see a large testing library in your production bundle when it shouldn't be there, this tool would immediately show you that problem. One important caveat: if you're compressing your code with a minifier (which most projects do), the sizes shown here are from before compression, so the actual final sizes might be smaller. Still, it gives you a fair sense of which dependencies are the real culprits.