Compiling with Gulp Browserify may have longer processing times after each save or change

Question

Compiling with Gulp Browserify may have longer processing times after each save or change

I have been working on improving the speed of my Gulp workflow by using Browserify. The approach I am taking is heavily influenced by this informative blog post:

Initially, everything seems to be functioning well with changes reflecting quickly (around 500ms).

However, I have noticed that the time it takes for changes to reflect increases each time I save a file. Here is a snippet of my task:

gulp.task('browserify', function() {

var bundler = browserify({
    entries: ['./src/js/app.js'],
    debug: production,
    cache: {},
    packageCache: {},
    fullPaths: true
});

var watcher = watchify(bundler);

return watcher
    .on('update', function() {

        var updateStart = Date.now();

        function transform(next) {
          console.log('JavaScript changed - recompiling via Browserify');
          watcher.transform(babelify).bundle()
          .pipe(source('bundle.js'))
          .pipe(gulp.dest('./build/scripts'))
          .on('end', next);
        }

        transform(function() {
          gulp.start('usemin');
          console.log('Complete!', (Date.now() - updateStart) + 'ms');
        });

    })
    .transform(babelify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./build/scripts'));

During the initial build, it takes approximately 3 seconds (including just one file).

However, on subsequent file changes:

JavaScript changed - recompiling via Browserify
[11:31:24] Starting 'usemin'...
Complete! 608ms
[11:31:24] Finished 'usemin' after 24 ms
JavaScript changed - recompiling via Browserify
[11:31:29] Starting 'usemin'...
Complete! 785ms
[11:31:29] Finished 'usemin' after 26 ms
JavaScript changed - recompiling via Browserify
[11:31:31] Starting 'usemin'...
Complete! 814ms
[11:31:31] Finished 'usemin' after 17 ms
JavaScript changed - recompiling via Browserify
[11:31:33] Starting 'usemin'...
Complete! 1112ms
[11:31:33] Finished 'usemin' after 17 ms
JavaScript changed - recompiling via Browserify
[11:31:36] Starting 'usemin'...
Complete! 1594ms
[11:31:36] Finished 'usemin' after 16 ms

Even though I am only saving the file without actually changing its content, the time taken seems to be stacking up. Is there something I am overlooking that might be causing this issue?

EDIT:

Upon further investigation, I found that removing .transform(babelify) from the 'update' section seems to resolve this prolonged duration issue. Although, I am unsure of any potential ramifications or why this change is causing such delay.

javascript npm gulp browserify

Answer 1

Answer №1

Is there something I'm overlooking here?

...

I discovered that eliminating .transform(babelify) from the 'update' section resolves the issue. I'm uncertain about any potential problems this change may create in the future... or why it causes such a delay.

Indeed, the issue arises from invoking .transform() within the update handler, leading to an accumulation of transformations. Essentially, each time the bundling process occurs, babelify processes the files in the bundle n times. Refer to example.com/issue/123, especially the comments by @username. You should adjust your script as follows:

gulp.task('browserify', function () {
  var watcher = watchify(
    browserify({
      entries: ['./src/js/app.js'],
      debug: production,
      cache: {},
      packageCache: {},
      // Note: Latest versions of watchify no longer require this setup
      fullPaths: true
    })
      .transform(babelify)
   );

  function bundle () {
    return watcher
      .bundle()
      .pipe(source('bundle.js'))
      .pipe(gulp.dest('./build/scripts'));
  }

  function update () {
    var updateStart = Date.now();

    console.log('JavaScript changed - recompiling via Browserify');

    bundle()
      .on('end', function () {
        gulp.start('usemin');
        console.log('Complete!', (Date.now() - updateStart) + 'ms');
      });
  }

  watcher.on('update', update);

  return bundle();
});

Answer 2

Is there something I'm overlooking here?

...

I discovered that eliminating .transform(babelify) from the 'update' section resolves the issue. I'm uncertain about any potential problems this change may create in the future... or why it causes such a delay.

Indeed, the issue arises from invoking .transform() within the update handler, leading to an accumulation of transformations. Essentially, each time the bundling process occurs, babelify processes the files in the bundle n times. Refer to example.com/issue/123, especially the comments by @username. You should adjust your script as follows:

gulp.task('browserify', function () {
  var watcher = watchify(
    browserify({
      entries: ['./src/js/app.js'],
      debug: production,
      cache: {},
      packageCache: {},
      // Note: Latest versions of watchify no longer require this setup
      fullPaths: true
    })
      .transform(babelify)
   );

  function bundle () {
    return watcher
      .bundle()
      .pipe(source('bundle.js'))
      .pipe(gulp.dest('./build/scripts'));
  }

  function update () {
    var updateStart = Date.now();

    console.log('JavaScript changed - recompiling via Browserify');

    bundle()
      .on('end', function () {
        gulp.start('usemin');
        console.log('Complete!', (Date.now() - updateStart) + 'ms');
      });
  }

  watcher.on('update', update);

  return bundle();
});

Compiling with Gulp Browserify may have longer processing times after each save or change

Answer №1

Similar questions

Avoiding ChartJS tooltips from being cut off

Tips for using JavaScript to style an array items individually

What is the process for setting the version in a serverless project?

The element type provided is not valid: it was expecting a string but received undefined. Please review the render method of AnimatedComponent in ReactNavigation

Action creator incomplete when route changes

I'm curious as to why the for-of loop within the function isn't producing the anticipated results that the regular for loop is achieving

Encountered a problem while setting up React app using npm

Implementing real-time streaming communication between server and client with Node.js Express

Error message: "Error on MacOS - Symbol not found: ____chkstk_darwin when executing node or npm commands"

Encountering the issue of "TypeError: Cannot read property 'file' of undefined" when trying to upload a video with Multer

Steps to remove a row from a table in a ReactJS component

Encountered an issue when deploying on CF: "ERROR The serve command must be executed within an Angular project, however a project definition could not be located."

What is causing the data element to remain unchanged within a Vue.js function and what steps can be taken to ensure its value can be updated?

Attempting to choose everything with the exception of a singular element using the not() function in Jquery

Is there a way to specifically retrieve the number of likes or followers from Facebook, Twitter, Instagram, and Snapchat in order to display them on my HTML website?

Is it preferable to include in the global scope or the local scope?

The challenge of transferring documents to the server

Encountering difficulties during the installation of npm due to various errors

Locate every item that has a value that is not defined

Ways to incorporate a scroll feature and display an iframe using JQuery