Gulp webserver unable to load a cachebusted JS resource

Question

I have bunch of JS files that have been versioned during deployment for JS cache-busting. It looks like this.

<script src="dist/js/bundle.js?v=ju29jj39983eddd2"></script>

I perform minification & compression using gulp. After it is done, I will save them to a local dir using a filename appended with version values. Here's the code.

gulp.task('bundle', function() {
 return gulp
   .src(config.app_scripts) // app_scripts is an array containing list of files
   .pipe(gutil.env.type === 'production' ? uglify({mangle: true}) : gutil.noop())
   .pipe(gutil.env.type === 'production' ? concat('b-bundle.js?v=' + secureRand) : concat('b-bundle.js'))
   .pipe(gulp.dest('dist/js'));
});

I serve the assets in the development environment using gulp-webserver. Here's the configuration. However, it doesn't pick the JS file the directory. It just fallbacks to index.html when page loads.

//Local webserver
gulp.task('webserver', function() {
  gulp.src(__dirname + '/client')
    .pipe(webserver({
      livereload: false,
      open: false,
      directoryListing: false,
      fallback: 'index.html',
      proxies: proxiesConf
  }));
});

I'm not sure what is causing this behavior. I highly appreciate if somebody can help me.

Answer 1

Nowadays, it's discouraged to cache-bust with query strings according to:

Most proxies, most notably Squid up through version 3.0, do not cache resources with a "?" in their URL even if a Cache-control: public header is present in the response. To enable proxy caching for these resources, remove query strings from references to static resources, and instead encode the parameters into the file names themselves.

-- https://gtmetrix.com/remove-query-strings-from-static-resources.html

Instead, you should (a) let the webserver invalidate cache by adding to the header: Cache-Control: no-cache, no-store, must-revalidate, or (b) adding a content hash to the file name of the resource.

<script src="assets/js/edf-d41d8cd98f00b204e9800998ecf8427e.min.js" />

instead of

<script src="assets/js/edf.min.js" />

-- https://medium.com/@codebyamir/a-web-developers-guide-to-browser-caching-cc41f3b73e7c

Good luck :)