For simple Webpack projects you can generate a stats file using webpack --json > stats.json
. This will create stats.json
in your current directory with all the data from your project. If you have a custom configuration you might need to tell Webpack about that, webpack --json --config webpack.config.js > stats.json
. See https://webpack.js.org for more help.
As example of the stats file can be found inside the Bonsai repo itself right here.
The stats file contains full file paths, the file sizes, and the relationships between each of the modules in your project. The online Bonsai analyser reads this data locally in your browser and doesn’t upload anything.
There are some other tools that have preceded Bonsai, and might also be helpful in your project.
Webpack has an analyse tool that nicely presents the content of the stats file and offers hints that can improve bundling.
Chrisbateman’s webpack-visualizer and th0r’s webpack-bundle-analyzer both show each file as a fraction of the bundle total, in different and stylish ways.