If you’re already using the webpack command line tool (like, your build command is just calling " webpack" on the command line), you can make the stats file like so: webpack -profile -json > stats.jsonĪnd it’ll output a file stats.json in the same directory. A lot of other articles make it sound like this was an obvious and simple thing to do, but I had some trouble nailing it down. To use it, you need to generate a JSON file with your bundle’s profile/statistics information in a very specific format. But it’s not the most intuitive, and you’ve got to jump through some hoops. The Webpack Analyzer site, however, will. Here’s where it’s much more useful to understand how they got there, which the aforementioned tools won’t tell you out of the box. Other modules that you’re using will have their own dependencies, so you’ll likely see modules in your bundle that make you think, “how on earth did this get in here?”
Finding exactly how a file got in your bundle Sometimes, though, you need to go deeper.
Like if I didn’t know what highcharts was, I could do a quick search through my app’s code for require('highcharts or from 'highcharts' to see if my code is bringing it in. This sort of view might also help you spot a module that is being included, but not actually used. I need that for sure, but do I need to render the charts immediately? Maybe it could be lazy loaded to reduce the size of the initial app bundle?
The next biggest module appears to be highcharts, our chart library. In the main App bundle file ( ), you can see that the package is a huge chunk, which I would expect because its our primary UI library. Sometimes, that’s all you need!įor example, here’s the default output for webpack-bundle-analyzer for one of my work projects: Webpack-bundle-analyzer and source-map-explorer tell you what modules are getting into your bundle. But I prefer Webpack Bundle Analyzer for a reason that I’ll get to in a bit. If you’re already generating source maps, you can use source-map-explorer with zero additional configuration. The docs for Create React App offer one suggestion called source-map-explorer, which is OK. There are a couple of ways to see what modules or files are contributing to the size of your bundle. Let’s say you’re using webpack to build a web application, and you’ve started to notice that your bundles are getting a bit too huge for comfort.
0 kommentar(er)
