Bundle Analyzer

You can install a webpack bundle analyzer that gives you a detail list of all the files that went into your deduped and minified bundle JS file.


The Bundle Analyzer lives on npm, so if you haven't already, make sure you have node installed on your machine first.

You can easily install the Bundle Analyzer by issuing the following sudo command.

$ sudo npm install -g electrode-bundle-analyzer

Module: electrode-bundle-analyzer

Install via npm

$ npm install --save electrode-bundle-analyzer

Example Applications


Bundle Analyzer expects a particular set of data for it to work.

Bundle Analyzer looks for the webpack module ID comment that normally looks something like this:

/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {

You can find more information about it in the Bundle Analyzer Readme file.

Command-Line Interface

Usage: analyze-bundle --bundle [bundle.js] --stats [stats.json] --dir
[output_dir] --rewrite

  -b, --bundle   JS bundle file from webpack                          [required]
  -s, --stats    stats JSON file from webpack[default: "dist/server/stats.json"]
  -r, --rewrite  rewrite the bundle file with module ID comments removed
  -d, --dir      directory to write the analyze results       [default: ".etmp"]
  -h, --help     Show help                                             [boolean]

When you install Bundle Analyzer globally, the analyze-bundle command-line tool is available as the quickest means of checking out your bundle.

If you don't specify an output directory, a default directory named .etmp will be created and a .gitignore file is also added in the directory to avoid Git picking it up.

The following two files will be written to the output directory:

  • bundle.analyze.json
  • bundle.analyze.tsv

The tsv file is a Tab Separated Values text file that you can easily import into a spreadsheet for viewing.

For example:

Module ID       Full Path       Identity Path   Size (bytes)
0       ./client/app.jsx        ./client/app.jsx  328
1       ./~/react/react.js      ~/react/react.js        46
2       ./~/react/lib/React.js  ~/react/lib/React.js    477
3       ./~/object-assign/index.js      ~/object-assign/index.js        984
4       ./~/react/lib/ReactChildren.js  ~/react/lib/ReactChildren.js    1344

You can view an example bundle.analyze.tsv output file using the Electrode Boilerplate code.

results matching ""

    No results matching ""