1
votes

How to get the list of compiled modules bundled with browserify + babelify? I've set a simple bundling process with gulp.

I noticed that the bundle becomes very big. I don't have a lot of 'useful' code. From libraries I have the following on the page: React, react-router, validator and EventEmitter, Immutable. But the bundle is about 1.5MBs. The map file is separate. Is there a way to minimize the size?

I tried to exclude React with:

bundleStream.external(['jquery', 'react']);

I saw that jquery was excluded and the size is smaller now. I still see React modules in output.

UPDATE

So, my problem was that I also used a few react components added via npm. One of those was pointing to 'react' and the other 'react/addons'. I figured that manually going through the code. Not sure which tool could help me with that. So to strip it I had to add both to my browserify bundle:

bundleStream.external(['jquery', 'react', 'react/addons']);

One thing to mention though is that my goal was to load the libraries from CDN and just use theirs globals in my code. I've written a simple browserify transform function like explained here to change all require('react') or import React from 'react' lines to global window.React, but it didn't work out with require calls inside those react components from npm. So like half of the bundle contained window.React and the other still require('react') lines.

To fix that I piped the bundle after babelify transform to replaceStream like so:

.pipe(replaceStream('require("react")', 'window.React'))
1

1 Answers