Visualise the module tree of browserify project bundles and track down bloat.
Switch branches/tags
Nothing to show
Pull request Compare This branch is 75 commits behind hughsk:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin
img
lib
src
.gitignore
.npmignore
LICENSE.md
README.md
index.js
package.json

README.md

disc

disc screenshot

Disc is a tool for analyzing the module tree of browserify 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. It works with node projects too!

The demo included on disc's github page is the end result of running the tool on itself - displaying both the node and browser code.

Installation

Disc 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 disc

Command-Line Interface

discify [file(s)...] {options}

Options:
  -h, --help       Displays these instructions.
  -o, --output     Output path of the bundle. Defaults to stdout.
  -t, --transform  Browserify transform stream(s) to use.
  -O, --open       Open the file immediately.

Simply specify your script entry points as you would when building a project with the browserify command-line tool - if your project uses source transforms, you should include those too, e.g:

disc -t coffeeify index.coffee

By default, disc will spit out a standalone HTML file that you can open in your browser:

disc index.js > stats.html
open stats.html

If you're looking to get a quick look at your project, you can use the --open or -O flags to start a local server and open it up in your browser automatically:

disc index.js --open

Module API

var disc = require('disc')
disc(options, callback)

Calls callback(err, html) with a standalone HTML file. You can pass the following options to the function to modify the output:

  • files: the files to parse/traverse
  • markdown: HTML to include below the chart.
  • transforms: transform streams to pass to module-deps.