[Webpack] Analyze a Production JavaScript Bundle with webpack-bundle-analyzer

Bundle size has a huge impact on JavaScript performance. It's not just about download speed, but all the JavaScript we ship to the browser needs to be parsed and compiled before it can be executed. Keeping our bundle in check can be difficult, but it's much easier when we can see where the bloat is coming from. In this lesson

Install:

npm i -D webpack-bundle-analyzer

We want to do anaylyzer only for production:

// webpack.config.prod.js

const merge = require('webpack-merge')
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
const baseConfig = require('./webpack.config.base')

module.exports = merge(baseConfig, {
  mode: 'production',
  plugins: [new BundleAnalyzerPlugin({
    analyzerMode: 'static',
    openAnalyzer: false,
    reportFilename: 'bundle_sizes.html'
  })]

it generate a 'bundle_szies.html' file in dist folder.

Github