transform babelify is slow since the very first run and it doesn't get better

So i’ve been reading tons of posts about similar issues… I tried several different approaches with “watchify”, none of the helped… seems my problem is not the same everyone used to have…

Here’s my gulpfile:

// VENDOR LIBS
var browserify = require('browserify');
var buffer = require('vinyl-buffer');
var cleancss = require('gulp-clean-css');
var concat = require('gulp-concat');
var eslint = require('gulp-eslint');
var gulp = require('gulp');
var rimraf = require('rimraf');
var sass = require('gulp-sass');
var scsslint = require('gulp-scss-lint');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');

gulp.task('lint', function () {
    return gulp.src(['./app/**/*.js','!./node_modules/**', '!./dist/**'])
        .pipe(eslint())
        .pipe(eslint.format())
});

gulp.task('bundle', function () {
    return browserify({entries: './app/main.js', debug: true})
        .transform('babelify', {presets: ['es2015', 'react']})
        .bundle()
        .pipe(source('main.js'))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

gulp.task('sass', function () {
    gulp.src('./app/components/**/*.scss')
        .pipe(scsslint({config: 'lint.yml'}))
        .pipe(sass())
        .pipe(concat('styles.css'))
        .pipe(cleancss())
        .pipe(gulp.dest('./dist'));
});

gulp.task('copy', ['lint', 'bundle', 'sass'], function () {
    return gulp.src(['app/index.html','app/lib/bootstrap-css/css/bootstrap.min.css','app/style.css'])
        .pipe(gulp.dest('dist'));
});

gulp.task('rimraf', function () {
    rimraf.sync('dist');
});

gulp.task('watch', ['copy'], function () {
    gulp.watch(['app/**/*', '!dist/**/*'], ['copy']);
});

gulp.task('build',['rimraf', 'watch'], function () {
   console.log('Gulp completed...');
});

gulp.task('default', ['build']);

It takes “bundle” around 7 second to finish (on the first and every subsequent run) and i’m barely starting with my project, so i’m worried this is going to get worse later 😕

I tried removing the uglifier but it’s the same and the file weights a lot more so that’s a no-no…

Any ideas on how to make this thing go faster?

Thanks!

[amirkdv]

I have been having similar issues and in my case the root issue was not babelify but rather my usage of browserify and watchify. As per watchify docs:

you MUST set the cache and packageCache properties

when creating the browserify instance (see code example below). In my case, I cut down my build times in watch (i.e. after the first build) from ~ 8 seconds to ~ 1 second by going from:

browserify(entry, {debug: true}).transform( ... )

to

browserify(entry, {debug: true, cache: {}, packageCache: {}}).transform( ... )

Turning debug off further cuts the 1 second down to 0.1 second for me.

Given the language in watchify docs, I’m confused why things would even work (instead of work and be super slow) if those two properties are not set.

[goto-bus-stop]

the OP is minifying the bundle too, and dependencies like react are quite large so depending on settings it can take a good while to minify. I’m not sure what gulp-uglify’s defaults are, but running terser -cm on just react-dom’s development build takes 4 seconds for me (without babel).

babelify does not run on dependencies unless you pass global: true. see earlier related questions: #268 #276 #56

the primary way to speed up builds in development is using watchify, which will only re-transpile the files that changed: https://github.com/browserify/watchify (and don’t minify in development! 😸 )