Digital Fortress Logo
Digital Fortress

A coders paradise

How to use Webpack Analyzer Bundle

#Webpack#Webpack Encore
Reading Time 3 min

Webpack analyzer bundle helps you to visualize the output of webpack in an interactive map. It displays the size that each bundle uses before and after being minified and compressed (gzipped). This can help you to discover which bundles are huge and if any of the bundles got in by mistake. Lets check this out by installing the bundle first.

1. Installing Webpack Analyzer Bundle

The easiest way to have this installed, is the official way, as shown below –

# NPM 
npm install --save-dev webpack-bundle-analyzer
# Yarn 
yarn add -D webpack-bundle-analyzer

This will add the webpack analyser bundle to your package.json file.

2. Setup Webpack Analyzer

Now we will update the webpack configuration file as shown,

// webpack configuration file
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

// if you are using Webpack encore (for Symfony users)
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
Encore.addPlugin(
    new BundleAnalyzerPlugin()
)

That’s it. At this point if you build your application, your terminal will show you the link where you can see the analysis made by the bundle.

webpack analyser bundle started

Usually, your browser will automatically open this link (or you can manually navigate to the url) in your browser. An example of the map generated looks as shown –

When you hover over any of the bundles, you will see the stat size, the parsed size as well as the gzipped size of that particular module. You can then get a clearer picture of what modules make most of the size of your final bundle and further optimize it.

One caveat that you might have noticed is that each time you build your application, the webpack analyzer bundle will run its server. This is its default behaviour. However, this usually is not needed. Lets see how we can customize the configuration.

3. Configure Webpack Analyser

To prevent the server from executing at every build, we can simply set the analyzerMode option to static. 

    new BundleAnalyzerPlugin({
        analyzerMode: "static"
    })

Now each time you build, a static report.html file will be created in your build folder with the same interactive map. Many a times, bundle analysis does not need to be done every time. We only need to analyze it from time to time. Lets see how we can generate an analysis report whenever we want it and not at every build.

Update the configuration passed to BundleAnalyserPlugin as shown below –

    new BundleAnalyzerPlugin({
        analyzerMode: 'disabled',
        generateStatsFile: true,
        statsOptions: { source: false }
    })

We set the analyzeMode to disabled so that every time when we build our application, the analyzer will not run automatically.
When you set the generateStatsFile: true, it results in the generation of a stats.json file in your build directory. This file contains all the necessary information to build the interactive map. To run the analysis,

    // build the application. This will generate stats.json
    ... 
    // then run the analysis
    webpack-bundle-analyzer --port 4200 public/build/stats.json

Expounding on the command to run the analyzer, the first argument specifies the port whereas the second argument lists the path where the stats.json file would be generated.
Going a step further, you could add this command to your package.json to have it executed more easily saving you plenty of keystrokes

// package.json
"scripts": {
  "build-report": "webpack-bundle-analyzer --port 4200 public/dist/stats.json",
  ...
}

Now you can simply execute npm run build-report to generate the report whenever needed.

Competition

If you are against running this locally or think that using a plugin for this is an overkill, there exist several online tools that can generate a map for you whenever needed. The only requirement is the webpack stats file.
You can generate a webpack stats file by executing the command as shown below. (Note that to generate this stats.json file, there is absolute no dependency on any plugin)

// generate stats.json
webpack --profile --json > stats.json

Now this stats.json file can be uploaded to any of the following tools to visualize and analyze the bundle’s composition.

Bonus

Whybundled is a pretty tool that helps you figure which module ended up in your bundle and also highlights modules that might have been bundled several times from different locations. Alternatively, duplicate-package-checker can also be used for the same.

Going Further – Improve Performance

Here’s an excellent article that I recommend to see how you could optimize webpack to enhance its performance. There are low level as well as high level optimizations that you could implement.

Lastly, to figure out the exact speed of your loaders and plugins, use the Speed Measure plugin that lists this information on every build helping you to focus your attention on plugins that need to be optimized.

References

Leave a Reply