webpack-bundle-analyzer

What is webpack-bundle-analyzer?

The webpack-bundle-analyzer package is a tool for analyzing the size of webpack output files. It helps developers understand where code bloat is coming from by visualizing the size of webpack-generated bundles and how they are related. It can be used to optimize the size of the output by identifying large chunks and their dependencies.

What are webpack-bundle-analyzer's main functionalities?

Visualizing Size of Webpack Bundles

This feature allows developers to visualize the size of their webpack bundles. The code sample shows how to include the BundleAnalyzerPlugin in a webpack configuration.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

Customizing the Analyzer Report

Developers can customize the analyzer's report output by specifying options such as the mode, report filename, and whether to automatically open the report. The code sample demonstrates how to set these options.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

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

Analyzing Bundle Content

This feature generates a detailed JSON file with statistics about the bundle's content, which can be further analyzed or tracked over time. The code sample shows how to enable this feature and set the stats file name.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      generateStatsFile: true,
      statsFilename: 'bundle_stats.json'
    })
  ]
};

Other packages similar to webpack-bundle-analyzer

source-map-explorer

The source-map-explorer package analyzes JavaScript bundles using the source maps. It helps to understand where code bloat is coming from. Unlike webpack-bundle-analyzer, which provides a web-based UI, source-map-explorer generates a static HTML file with a treemap visualization of the bundle.

rollup-plugin-visualizer

This package is similar to webpack-bundle-analyzer but is designed for use with Rollup instead of webpack. It visualizes and analyzes the module tree of Rollup bundles. It provides a visual representation of how much space each module takes up and can output both HTML and JSON files.

README

Webpack Bundle Analyzer

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

What is this for?

Just take a look at this demo:

This module will help you:

1. Realize what's really inside your bundle
2. Find out what modules make up the most of it's size
3. Find modules that got there by mistake
4. Optimize it!

And the best thing is it supports minified bundles! It parses them to get real size of bundled modules.

Installation and usage

There are two ways to use this module:

As plugin

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

In webpack.config.js:

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// ...
plugins: [new BundleAnalyzerPlugin()]
// ...

BundleAnalyzerPlugin constructor can take an optional configuration object that defaults to this:

new BundleAnalyzerPlugin({
  // Can be `server`, `static` or `disabled`.
  // In `server` mode analyzer will start HTTP server to show bundle report.
  // In `static` mode single HTML file with bundle report will be generated.
  // In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`.
  analyzerMode: 'server',
  // Port that will be used in `server` mode to start HTTP server.
  analyzerPort: 8888,
  // Path to bundle report file that will be generated in `static` mode.
  // Relative to bundles output directory.
  reportFilename: 'report.html',
  // Automatically open report in default browser
  openAnalyzer: true,
  // If `true`, Webpack Stats JSON file will be generated in bundles output directory
  generateStatsFile: false,
  // Name of Webpack Stats JSON file that will be generated if `generateStatsFile` is `true`.
  // Relative to bundles output directory.
  statsFilename: 'stats.json',
  // Options for `stats.toJson()` method.
  // For example you can exclude sources of your modules from stats file with `source: false` option.
  // See more options here: https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
  statsOptions: null
})

As CLI utility

You can also analyze already existing bundles if you have Webpack Stats JSON file.

You can generate it using BundleAnalyzerPlugin with generateStatsFile option set to true or with this simple command: webpack --profile --json > stats.json

webpack-bundle-analyzer --help will show you all usage information.

License

MIT

Changelog

1.5.2

• Bug Fix
  • Support array module descriptors that can be generated if DedupePlugin is used (fixes #4)