Analyzing Bundle Sizes

Webpack Bundle Analyzer is a webpack plugin which helps you visualize the size of your bundles with an interactive zoom-able tree-map.

• Realize what's really inside your bundle

• Find out what modules make up the most of their size

• Find modules that got there by mistake

• Optimize it!

npm install --save-dev webpack-bundle-analyzer

in your webpack.config.js

const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')

module.exports = Object.assign({}, configuration, {
  mode: 'production',
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
    }),
  ],
})

and run the production build. The plugin will open the stats page in a browser.

npm run build