Browserify is an amazing tool that brings Node.js style modular JavaScript to the client. Having Node Package Manager at your fingertips while developing front-end apps is extremely powerful.
Since Node.js and NPM started out heavily focused on the server-side some packages are not ideal for use on the client. At some point you'll install a package that you believe is small and does one thing well only to find that it is heavier than you thought. For example, I wanted to use a slugify function from NPM but the top hit shipped with a ~2MB unicode dictionary, which needlessly bloated my browserify bundle.
Enter disc.
Disc provides a visualization of your projects dependencies, which lets you track down any packages that bloat your browserify bundle.
If you're using npm scripts as your build tool, and you probably should be, you can add a command to view a disc visualization any time. I prefer to run this on my production build to get an idea of what the total file size of my bundle will be in the real world. With that said you'll need to install a few dependencies to support compilation w/browserify, minification with uglifyjs, and disc itself:
// Install dev dependencies
npm install --save-dev disc browserify uglifyjs
package.json
{
"scripts": {
"inspect:bundle": "browserify --full-paths src/js/index.js | uglifyjs -mc | discify --open"
}
}
Now all you need to do is use npm run inspect:bundle.
Of course you'll need to replace src/js/index.js with your browserify entry file. As you can see we're able to pipe the output of each tool as the input for the next tool, which means we don't need to create a bunch of temp files. You can even pipe your production ready bundle to discify and have it automatically open in a browser window.