Search code examples
node.jsgoogle-chromeexpressgulpbrowserify

Changes to JavaScript files do not take effect instantly. Possible issue with gulp browserify task


When I make changes to a JavaScript file it often takes up to 10 seconds of constantly refreshing the page before the changes take effect. I know that Chrome caches a lot, and I have used a couple of techniques to work around this:

I have set the Cache-control header to 'no-cache, no-store', added a query string based on the current time to every javascript file (and I have confirmed that this actually changes every time I refresh), and I have enabled the "Disable cache" option in the dev tools. However, the JavaScript files still don't load instantly...

Edit: After some more testing I have discovered that the gulp browserify task in my node.js app (that builds client-side JavaScript bundles) not updates the builds before 5-10 seconds after gulp has restarted. This is however weird since gulp outputs "Finished 'browserify' after 3.24 ms". This explains why the JavaScript files don't refresh in the browser, but I'm not able to figure out why they are not refreshed immediately.

Have anyone experienced this before?


Solution

  • The task finishes before browserify is done because it's not set up correctly, probably you're not returning the stream.

    Browserify takes a while to build files, definitely not a few milliseconds, so while gulp reports it as done, browserify is still working on it and saves the file 5-10 seconds later.

    Look into gulp-starter to see how it uses watchify to considerably speed up compilation time during development.