Why does Gulp take so long to compile and package code from jsx > js?

Question

JavaScript

Friends, hello everyone. I am writing code in react, using gulp # 4.0 as a build system. To build require js, I use the usual browserify in conjunction with gulp. The assembly of the js code is obtained in ~ 30 seconds, and the watcher is updated only 7-8 seconds after the file is saved. Below I post the task code that bandits the entire JS code. This code takes all the React components from app.js, wraps it in a browserify wrapper to use require js in the browser, transpiles it in ES5, and minifies it. Thus, all the client code and the react library end up in one bundle.js file, which we include later. The whole process takes up to ~ 30 seconds, and the watcher updates within the same 7-8 seconds. How normal is this situation, or am I doing something wrong that makes such time delays? How can I speed up a build with react? Thanks in advance.

gulp.task('scripts', function() {
  return browserify('dev/js/app.js')
    .transform("babelify", {presets: ["es2015", "react"]})
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(uglify({
      mangle : true,
      compress : true
    }))
    .pipe(gulp.dest('public/js'));
});
gulp.watch('dev/js/*.js', gulp.series('js'));

Answer 1

And why the library in a common bundle? I collect vendors in a separate task, in a separate file, because they are rarely added/removed. And your code is already separate, and it compiles instantly.