gulp browserify bundle time takes too long

Question

I've ran into a strange issue and need your help to figure what's going on.

I've configured gulp to build my a test up written in React.js in ES6. I've used browserify to setup the CommonJS env and babelify for bigger ES6 support. And everything works, it just takes too long (in my opinion) to build if React is required as CommonJS module. Meaning this

import React from 'react';

line will raise the bundle/compile time from 1.2secs to around 4secs on the initial build, then when any changes are detected it takes around 2.5secs to rebuild the js files. And this time rapidly goes up when more modules are included. My work around was to configure bower to expose any external libraries as globals in the browser, don't like this solution as much.

Here is my main browserify setup:

function buildApp () {
  return browserify({
    entries: config.paths.jsx,
    extensions: ['.jsx'],
    debug: true
  })
  .bundle()
  .on('error', onError)
  .pipe(source('app.js'))
  .pipe(gulp.dest(config.paths.dest));
}

and the transform is added via packages.json

"browserify": {
  "transform": [
    "babelify"
  ]
}

I did try the ignore option in my buildApp function as follows:

transform(babelify.configure({
  ignore: /node_modules/
})

but that did not help.

I'm using the latest packages, as far as I know, meaning:

"babelify": "^6.3.0",
"browserify": "^11.2.0",
"react": "^0.14.0"

on Node v4.1.0. Anyone has any ideas? By all means, please share.

P.S. Here is the link to the repo if someone has the time and wants to take a closer look. Or, maybe, test the build time.

Answer 1

This is because React goes and requires a couple of things which means your browserify has to traverse through more nodes.

One way you might be able to improve this is to prebundle React. However, this would only improve the React library, add another library and it will slow down again.

One thing you can use to improve rebundling is by adding watchify to your browserify bundle process.

Give this a try

var watchify = require('watchify');
var babelify = require('babelify');

var bundler;

function buildApp () {
  bundler = bundler || watchify(browserify({
    entries: config.paths.jsx,
    extensions: ['.jsx'],
    debug: true,
    transform: [babelify], //This will allow you to use babel for jsx/es6
    cache: {}, // required for watchify
    packageCache: {}, // required for watchify
    fullPaths: true //You can change this false in production
  }))

  return bundler
  .bundle()
  .on('error', onError)
  .pipe(source('app.js'))
  .pipe(gulp.dest(config.paths.dest));
}   

Essentially what you need to do is wrap your browserify in a watchify and add some extra properties (cache, packageCache, fullPaths)

Watchify will speed up your rebundling process by caching the bundled files.

!Important Note

Remember to remove watchify in production, unless you're build process will hang since it's watching your files.

Answer 2

Please have a look on my repo https://github.com/skrobek/react-gulp-browserify. I'm using exactly the same tech stack: gulp, browserify, react.