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.

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();
});     

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Avoiding ChartJS tooltips from being cut off

I've been exploring how to prevent chartjs from cutting off its tooltips, but I haven't been able to find a config option to address this issue. https://i.sstatic.net/Knzvd.png Here's what I've attempted so far: <script> ...

Tips for using JavaScript to style an array items individually

I have currently placed the entire array within a single div, but I would like to be able to display each element of the array separately so that I can style "date", "title", and "text" individually. This is my JSON structure: [ { "date": "Example ...

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

Recently I downgraded the serverless to version 1.38.0 using the command npm install -g <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="047761767261766861777744352a373c2a34">[email protected]</a>. This triggered in ...

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

I've been facing an issue for the past few days with ReactNavigation v6+. While there are multiple questions and answers about the invalid element type, none of them seem to be working with this specific example: The problem arose after integrating t ...

Action creator incomplete when route changes

In my React-Redux application, there is an action creator that needs to make 4 server calls. The first three calls are asynchronous and the fourth call depends on the response of the third call. However, if a user changes the route before the response of t ...

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

Why is the behavior of the for...of loop different from the traditional for loop within this function? It appears that the 'el' in the for...of loop does not behave the same as iterable[i] in the regular for loop? var uniqueInOrder = function(it ...

Encountered a problem while setting up React app using npm

I've encountered an issue while trying to install a react app using npm. Even after downgrading my npm version to 3, I am still facing errors. My internet connection is strong as well. Thank you in advance for your assistance! https://i.stack.imgur ...

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

When a post request is made, the server generates data every few seconds, ranging from 1000 to 10000 entries. Currently, I am saving this data into a CSV file using createWriteStream and it works well. How can I pass this real-time (Name and Age) data to t ...

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

Whenever I try to run node or npm commands on the terminal (like node -v, npm -v, or just node or npm), I encounter the following error message: dyld: lazy symbol binding failed: Symbol not found: ____chkstk_darwin Referenced from: /Users/alvarez/.nvm/ve ...

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

The objective is to select a video file from the desktop and upload it to the platform. The uploaded video file will then be automatically posted to a specified Youtube channel using GCD. An error message I encountered is:"react-dom.development.js:40 ...

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

I'm struggling with implementing a delete operation for table rows and encountering errors. Any assistance in resolving this issue would be greatly appreciated. Since I am unsure how to set an auto-incrementing id, I used Date.now(). Now my goal is t ...

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."

I need to set up my Angular Application on Cloud-Foundry. Here is the package.json file currently located in the dist folder: { "name": "showroom-app", "version": "0.0.0", "engines": { "node" ...

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?

Using the axios API in the created() function, I am able to access webURLs. When a mouseover event triggers a v-for handler in the HTML file, the index is obtained and assigned to the selectedState data element. Although the value of selectedState changes ...

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

Within the mosaic (div #mosaique) are various div elements. My goal is to make it so that when I click on a specific div, like #langages or #libraries, the other divs become opaque while the selected div undergoes a size change (which works correctly in t ...

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?

Can you provide guidance on how to obtain the total numbers of likes or followers for our Facebook, Twitter, Instagram, and Snapchat pages without including the plugin boxes or buttons? We are solely interested in the actual numbers. Would this be feasibl ...

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

When it comes to requiring a node module, what is the best approach? Should one declare the module in the global scope for accuracy and clarity, or does declaring it in the local scope make more sense? Consider the following examples: Global: let dns = r ...

The challenge of transferring documents to the server

There is a form on the webpage where users can select a file and click a button to send it. <form enctype="multipart/form-data"> <input type="file" id="fileInput" /> <button type="button&quo ...

Encountering difficulties during the installation of npm due to various errors

Why is my npm install failing? C:\WINDOWS\system32>npm install npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\WINDOWS\system32 ...

Locate every item that has a value that is not defined

My data is stored in indexeddb, with an index on a text property of the objects. I am trying to retrieve all objects where this property's value is undefined. I have been experimenting with IDBKeyRange.only(key), but when I use null, undefined, or an ...

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

Is there a way to animate the appearance of hidden iframes one by one as the user scrolls down the website using jQuery? I have come across some solutions, but they all seem to make them appear all at once. I'm looking for a way to make the iframes s ...