• Stars
    star
    12,483
  • Rank 2,417 (Top 0.05 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

npm node tests downloads

Webpack Bundle Analyzer

Visualize size of webpack output files with an interactive zoomable treemap.

Install

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

Usage (as a plugin)

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

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

It will create an interactive treemap visualization of the contents of all your bundles.

webpack bundle analyzer zoomable treemap

This module will help you:

  1. Realize what's really inside your bundle
  2. Find out what modules make up the most of its 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. And it also shows their gzipped sizes!

Options (for plugin)

new BundleAnalyzerPlugin(options?: object)
Name Type Description
analyzerMode One of: server, static, json, disabled Default: server. 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 json mode single JSON 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.
analyzerHost {String} Default: 127.0.0.1. Host that will be used in server mode to start HTTP server.
analyzerPort {Number} or auto Default: 8888. Port that will be used in server mode to start HTTP server. If analyzerPort is auto, the operating system will assign an arbitrary unused port
analyzerUrl {Function} called with { listenHost: string, listenHost: string, boundAddress: server.address}. server.address comes from Node.js Default: http://${listenHost}:${boundAddress.port}. The URL printed to console with server mode.
reportFilename {String} Default: report.html. Path to bundle report file that will be generated in static mode. It can be either an absolute path or a path relative to a bundle output directory (which is output.path in webpack config).
reportTitle {String|function} Default: function that returns pretty printed current date and time. Content of the HTML title element; or a function of the form () => string that provides the content.
defaultSizes One of: stat, parsed, gzip Default: parsed. Module sizes to show in report by default. Size definitions section describes what these values mean.
openAnalyzer {Boolean} Default: true. Automatically open report in default browser.
generateStatsFile {Boolean} Default: false. If true, webpack stats JSON file will be generated in bundle output directory
statsFilename {String} Default: stats.json. Name of webpack stats JSON file that will be generated if generateStatsFile is true. It can be either an absolute path or a path relative to a bundle output directory (which is output.path in webpack config).
statsOptions null or {Object} Default: null. 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.
excludeAssets {null|pattern|pattern[]} where pattern equals to {String|RegExp|function} Default: null. Patterns that will be used to match against asset names to exclude them from the report. If pattern is a string it will be converted to RegExp via new RegExp(str). If pattern is a function it should have the following signature (assetName: string) => boolean and should return true to exclude matching asset. If multiple patterns are provided asset should match at least one of them to be excluded.
logLevel One of: info, warn, error, silent Default: info. Used to control how much details the plugin outputs.

Usage (as a CLI utility)

You can analyze an existing bundle if you have a 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

If you're on Windows and using PowerShell, you can generate the stats file with this command to avoid BOM issues:

webpack --profile --json | Out-file 'stats.json' -Encoding OEM

Then you can run the CLI tool.

webpack-bundle-analyzer bundle/output/path/stats.json

Options (for CLI)

webpack-bundle-analyzer <bundleStatsFile> [bundleDir] [options]

Arguments are documented below:

bundleStatsFile

Path to webpack stats JSON file

bundleDir

Directory containing all generated bundles.

options

  -V, --version               output the version number
  -m, --mode <mode>           Analyzer mode. Should be `server`, `static` or `json`.
                              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 `json` mode single JSON file with bundle report will be generated. (default: server)
  -h, --host <host>           Host that will be used in `server` mode to start HTTP server. (default: 127.0.0.1)
  -p, --port <n>              Port that will be used in `server` mode to start HTTP server. Should be a number or `auto` (default: 8888)
  -r, --report <file>         Path to bundle report file that will be generated in `static` mode. (default: report.html)
  -t, --title <title>         String to use in title element of html report. (default: pretty printed current date)
  -s, --default-sizes <type>  Module sizes to show in treemap by default.
                              Possible values: stat, parsed, gzip (default: parsed)
  -O, --no-open               Don't open report in default browser automatically.
  -e, --exclude <regexp>      Assets that should be excluded from the report.
                              Can be specified multiple times.
  -l, --log-level <level>     Log level.
                              Possible values: debug, info, warn, error, silent (default: info)
  -h, --help                  output usage information

Size definitions

webpack-bundle-analyzer reports three values for sizes. defaultSizes can be used to control which of these is shown by default. The different reported sizes are:

stat

This is the "input" size of your files, before any transformations like minification.

It is called "stat size" because it's obtained from Webpack's stats object.

parsed

This is the "output" size of your files. If you're using a Webpack plugin such as Uglify, then this value will reflect the minified size of your code.

gzip

This is the size of running the parsed bundles/modules through gzip compression.

Selecting Which Chunks to Display

When opened, the report displays all of the Webpack chunks for your project. It's possible to filter to a more specific list of chunks by using the sidebar or the chunk context menu.

Sidebar

The Sidebar Menu can be opened by clicking the > button at the top left of the report. You can select or deselect chunks to display under the "Show chunks" heading there.

Chunk Context Menu

The Chunk Context Menu can be opened by right-clicking or Ctrl-clicking on a specific chunk in the report. It provides the following options:

  • Hide chunk: Hides the selected chunk
  • Hide all other chunks: Hides all chunks besides the selected one
  • Show all chunks: Un-hides any hidden chunks, returning the report to its initial, unfiltered view

Troubleshooting

I don't see gzip or parsed sizes, it only shows stat size

It happens when webpack-bundle-analyzer analyzes files that don't actually exist in your file system, for example when you work with webpack-dev-server that keeps all the files in RAM. If you use webpack-bundle-analyzer as a plugin you won't get any errors, however if you run it via CLI you get the error message in terminal:

Error parsing bundle asset "your_bundle_name.bundle.js": no such file
No bundles were parsed. Analyzer will show only original module sizes from stats file.

To get more information about it you can read issue #147.

Other tools

  • Statoscope - Webpack bundle analyzing tool to find out why a certain module was bundled (and more features, including interactive treemap)

Maintainers


Yuriy Grunin

Vesa Laakso

Contributing

Check out CONTRIBUTING.md for instructions on contributing 🎉

More Repositories

1

mini-css-extract-plugin

Lightweight CSS extraction plugin
JavaScript
4,621
star
2

awesome-webpack

A curated list of awesome Webpack resources, libraries and tools
HTML
4,566
star
3

css-loader

CSS Loader
JavaScript
4,274
star
4

extract-text-webpack-plugin

[DEPRECATED] Please use https://github.com/webpack-contrib/mini-css-extract-plugin Extracts text from a bundle into a separate file
JavaScript
4,020
star
5

sass-loader

Compiles Sass to CSS
JavaScript
3,890
star
6

postcss-loader

PostCSS loader for webpack
JavaScript
2,845
star
7

copy-webpack-plugin

Copy files and directories with webpack
JavaScript
2,820
star
8

webpack-hot-middleware

Webpack hot reloading you can attach to your own server
JavaScript
2,335
star
9

terser-webpack-plugin

Terser Plugin
JavaScript
1,924
star
10

file-loader

File Loader
JavaScript
1,866
star
11

style-loader

Style Loader
JavaScript
1,642
star
12

worker-loader

A webpack loader that registers a script as a Web Worker
JavaScript
1,448
star
13

install-webpack-plugin

Speed up development by automatically installing & saving dependencies with Webpack.
JavaScript
1,435
star
14

url-loader

A loader for webpack which transforms files into base64 URIs
JavaScript
1,407
star
15

compression-webpack-plugin

Prepare compressed versions of assets to serve them with Content-Encoding
JavaScript
1,400
star
16

uglifyjs-webpack-plugin

[deprecated] UglifyJS Plugin
JavaScript
1,382
star
17

html-loader

HTML Loader
JavaScript
1,161
star
18

thread-loader

Runs the following loaders in a worker pool
JavaScript
1,114
star
19

webpack-serve

Repository has moved:
JavaScript
1,095
star
20

eslint-loader

[DEPRECATED] A ESlint loader for webpack
JavaScript
1,058
star
21

less-loader

Compiles Less to CSS
JavaScript
952
star
22

raw-loader

A loader for webpack that allows importing files as a String
JavaScript
846
star
23

purifycss-webpack

UNMAINTAINED, use https://github.com/FullHuman/purgecss-webpack-plugin
JavaScript
773
star
24

bundle-loader

Bundle Loader
JavaScript
662
star
25

cache-loader

[DEPRECATED] Caches the result of following loaders on disk
JavaScript
641
star
26

expose-loader

Expose Loader
JavaScript
545
star
27

imports-loader

Imports Loader
JavaScript
520
star
28

stylus-loader

🎨 A stylus loader for webpack.
JavaScript
498
star
29

babel-minify-webpack-plugin

[DEPRECATED] Babel Minify Webpack Plugin
JavaScript
493
star
30

svg-inline-loader

Inline SVG loader with cleaning-up functionality
JavaScript
490
star
31

json-loader

json loader module for webpack - UNMAINTAINED
JavaScript
438
star
32

closure-webpack-plugin

Webpack Google Closure Compiler and Closure Library plugin -
JavaScript
434
star
33

stylelint-webpack-plugin

A Stylelint plugin for webpack
JavaScript
425
star
34

source-map-loader

extract sourceMappingURL comments from modules and offer it to webpack
JavaScript
355
star
35

script-loader

[deprecated] Script Loader
JavaScript
325
star
36

i18n-webpack-plugin

[DEPRECATED] Embed localization into your bundle
JavaScript
318
star
37

css-minimizer-webpack-plugin

cssnano plugin for Webpack
JavaScript
305
star
38

istanbul-instrumenter-loader

Istanbul Instrumenter Loader
JavaScript
273
star
39

grunt-webpack

integrate webpack into grunt build process
JavaScript
264
star
40

react-proxy-loader

Wraps a react component in a proxy component to enable Code Splitting.
JavaScript
259
star
41

eslint-webpack-plugin

A ESLint plugin for webpack
JavaScript
248
star
42

image-minimizer-webpack-plugin

Webpack loader and plugin to compress images using imagemin
JavaScript
220
star
43

exports-loader

Exports Loader
JavaScript
214
star
44

webpack-command

[DEPRECATED] Lightweight, modular, and opinionated webpack CLI that provides a superior experience
JavaScript
213
star
45

webpack-stylish

A stylish, optionated reporter for webpack
JavaScript
202
star
46

val-loader

val loader module for webpack
JavaScript
181
star
47

mocha-loader

Mocha Loader
JavaScript
147
star
48

null-loader

[DEPRECATED] A loader that returns an empty module (can still be used for webpack 4).
JavaScript
144
star
49

coffee-loader

CoffeeScript Loader
JavaScript
142
star
50

webpack-hot-client

webpack HMR Client
JavaScript
120
star
51

node-loader

node loader for native modules
JavaScript
116
star
52

transform-loader

transform loader for webpack
JavaScript
110
star
53

webpack-defaults

Defaults to be shared across webpack projects
JavaScript
108
star
54

json5-loader

[Deprecated] JSON5 loader for Webpack (can still be used for webpack 4)
JavaScript
72
star
55

jshint-loader

[DEPRECATED] jshint loader for webpack, please migrate on `eslint`
JavaScript
67
star
56

webpack-canary

Canary tooling for checking webpack dependencies against specific webpack versions
JavaScript
47
star
57

multi-loader

[DEPRECATED] A loader that splits a module into multiple modules loaded with different loaders.
JavaScript
44
star
58

webpack-log

[DEPRECATED] Please use logger API https://github.com/webpack/webpack/pull/9436
JavaScript
38
star
59

zopfli-webpack-plugin

[DEPRECATED] Prepare compressed versions of assets with node-zopfli
JavaScript
26
star
60

component-webpack-plugin

Use components with webpack - UNMAINTAINED
JavaScript
20
star
61

remark-loader

Load markdown through remark with image resolving and some react-specific features.
JavaScript
15
star
62

gzip-loader

[DEPRECATED] gzip loader module for webpack
JavaScript
15
star
63

yaml-frontmatter-loader

[DEPRECATED] Yaml frontmatter loader
JavaScript
14
star
64

json-minimizer-webpack-plugin

JSON minimizer webpack plugin
JavaScript
14
star
65

config-loader

[DEPRECATED] A loader for webpack configuration files
JavaScript
14
star
66

html-minimizer-webpack-plugin

HTML minimizer webpack plugin
JavaScript
13
star
67

organization

Applications, Standards & Documentation for webpack-contrib.
13
star
68

i18n-loader

i18n loader module for webpack - UNMAINTAINED
JavaScript
11
star
69

eslint-config-webpack

Webpack standard eslint configuration
JavaScript
9
star
70

coffee-redux-loader

coffee redux loader module for webpack - UNMAINTAINED
JavaScript
7
star
71

test-utils

webpack Loader/Plugin Test Helpers
JavaScript
6
star
72

coverjs-loader

coverjs loader module for webpack - UNMAINTAINED
JavaScript
4
star
73

circleci-node8

[DEPRECATED] Please migrate on azure pipelines. CircleCI 2.0 NodeJS 8 build container -
Dockerfile
3
star
74

restyle-loader

[DEPRECATED] Use https://github.com/danielverejan/restyle-loader
JavaScript
3
star
75

tag-versions

A commandline wrapper around omichelsen/compare-versions to compare dist-tags
JavaScript
2
star
76

circleci-node-base

CircleCI 2.0 base build container -
Dockerfile
1
star
77

babel-preset-webpack

[DEPRECATED] Webpack Organization es2015 Babel Preset - See:
JavaScript
1
star
78

circleci-node9

[DEPRECATED] Please migrate on azure pipelines. CircleCI 2.0 NodeJS 9 build container -
Dockerfile
1
star
79

circleci-node-jdk8

Deprecated, use ->
1
star
80

cli-utils

[DEPRECATED] A suite of utilities for webpack projects which expose a CLI
JavaScript
1
star