Edit on GitHub

Bundle Analyzer

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

Installation #

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

Installing should then be as easy as:

$ sudo npm install -g electrode-bundle-analyzer

Module: electrode-bundle-analyzer #

Install via npm #

$ npm install --save electrode-bundle-analyzer

Example Applications #

Usage #

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, analyze-bundle command-line tool is made available as the quickest means of checking out your bundle.

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

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 using the Electrode Boilerplate code.