watchify - very slow

[raulmatei]

Hi,

We're using watchify in a relatively large project (more than 30k lines of code). We have ES6 features and React JSX code that we transpile with Reactify (tried Babel(ify) but it was even slower). We moved from Grunt to Gulp and also upgraded from Browserify 4.2.3 to 9.0.8, the initial build takes >20 secs, which is fine, but the rebuild is 4 times slower than it was. With the older versions of Browserify and Watchify we've had under 1sec on rebuild, now even if we're using the watchify command it takes longer:

$ watchify src/js/application.js -d -t [reactify --es6] -o dist/bundle.js -v
7833167 bytes written to dist/bundle.js (22.25 seconds)
7833180 bytes written to dist/bundle.js (5.11 seconds)
7833167 bytes written to dist/bundle.js (4.96 seconds)
7833298 bytes written to dist/bundle.js (4.80 seconds)

If I remove the debug option, it goes around 1 sec on rebuild:

$ watchify src/js/application.js -t [reactify --es6] -o dist/bundle.js -v
2692764 bytes written to dist/bundle.js (18.38 seconds)
2692729 bytes written to dist/bundle.js (1.64 seconds)
2692730 bytes written to dist/bundle.js (1.38 seconds)
2692764 bytes written to dist/bundle.js (1.42 seconds)

But we're dead without sourcemaps :).

Any thoughts?

Thanks, Raul.

[zertosh]

It could be changes in reactify. I'm not sure when they turned on sourceMaps by default so that could be yet another slowdown. Combining source maps is really expensive. You could try turning off reactify's source maps by making this false but leaving browserify's source maps on.

[mattdesl]

You could also test out some of the optimizations discussed here.

[raulmatei]

Thanks @zertosh - turning Reactify sourceMap off reduced the rebuild time with 2 seconds or more:

$ watchify src/js/application.js -d -t [reactify --es6] -o dist/bundle.js -v
7004983 bytes written to dist/bundle.js (17.88 seconds)
7004974 bytes written to dist/bundle.js (2.71 seconds)
7004897 bytes written to dist/bundle.js (2.32 seconds)

@mattdesl I'll have a lock on Browserify 1208 issue, thanks for the link.

[zertosh]

@raulmatei I see you made https://github.com/andreypopp/reactify/pull/64 :+1:.

You could also give babel/babelify a try. The acorn parser is faster. It can even do the equivalent of envify via the utility.inlineEnvironmentVariables transform - saving an extra AST parse (if that's a thing you use).

[raulmatei]

@zertosh - thanks for closing the issue, I was going to close it myself as it's not related with watchify. Sorry for not doing it in time. I'm using Babelify in other projects (smaller ones), and it fits great. For this project there was not too much time for tweaks so I've just dropped it in, saw that it was slower than Reactify and rolled back. I'll spend some more time on it next days...