Edit on GitHub

Electrify

Build Status

An Electrode Javascript bundle viewer aptly named Electrify, this is a stunning visual tool for analyzing the module tree of electrode-io + webpack project bundles. It's especially handy for catching large and/or duplicate modules which might be either bloating up your bundle or slowing down the build process.

screencast

Installation #

Electrify 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-electrify

Module: electrode-electrify #

Install via npm #

$ npm install --save electrode-electrify

Example Applications #

Usage #

Command-Line Interface #

electrify [stats-bundle(s)...] {options}

Options:
  -h, --help    Displays these instructions.
  -O, --open    Opens viewer in a new browser window automatically
  -m, --mode    the default file scale mode to display: should be
                either "count" or "size". Default: size

When you install Electrify globally, electrify command-line tool is made available as the quickest means of checking out your bundle. As of electrode-electrify@v1.0.0, the tool takes any webpack-stats object example as input and spits out a standalone HTML page as output.

You can easily chain the stats file into another command, or use the --open flag to open Electrify in your browser automatically:

For example:

$ electrify build/stats.json --open

Palettes #

You can switch between multiple color palettes, most of which serve to highlight specific features of your bundle:

Structure Highlights #

Structure Highlights

Highlights node_modules directories as green and lib directories as orange. This makes it easier to scan for "kitchen sink" modules or modules with lots of dependencies.

File Types #

File Types

Highlights each file type (e.g. .js, .css, etc.) a different color. Helpful for tracking down code generated from a transform that's bloating up your bundle more than expected.

Original/Pastel #

Pastel

Nothing particularly special about these palettes – colored for legibility and aesthetics respectively.

Other useful bundle/stats generators #