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

Options:
  -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-bundlecommand-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.

results matching ""

    No results matching ""