How to keep a fast build with Browserify and ReactJS

Our current project is based on ReactJS and uses Gulp.js as a build tool and Browserify to assemble all the javascript.

We used the following versions for this example:

• Browserify: 5.9.1
• Watchify: 1.0.1
• Gulp: 3.6.0

When I started with a build I created a naive gulp task to build the javascript:

This works fine, we create a Browserify bundler and add a transformer to transform jsx to javascript and then bundle everything together and if it's not a production build add sourcemaps. If you then start to put a watch around this to create a fast feedback cycle..

You will start to notice the building of the scripts is pretty slow:

[gulp] Running 'scripts'...

[gulp] Finished 'scripts' in 2.51 s

And the more dependencies you add the slower the build will become.

But luckily there is a fix, the creator of Browserify has also created Watchify. Watchify watches your files and builds incrementally. To use watchify I extracted the scripts task to a simple function:

And then changed the tasks implementations to call this function:

The initial build still takes 2.5 seconds but after that the builds take mostly about 100ms, even if your program keeps growing the initial build can take a while but the incremental builds will stay just as fast. This is very important to keep a fast feedback cycle while developing.

You can view the complete buildfile that we are currently using here if you spot any errors or have any improvements please comment or send me a message.

2014-08-01: Updated the examples for version 5.9.1 of browserify