Gulp 网络服务器无法加载缓存被破坏的 JS 资源答案

【问题标题】：Gulp webserver unable to load a cachebusted JS resourceGulp 网络服务器无法加载缓存被破坏的 JS 资源
【发布时间】：2016-07-27 08:54:30
【问题描述】：

我有一堆 JS 文件，这些文件在部署期间已针对 JS 缓存清除进行了版本控制。看起来像这样。

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

我使用 gulp 执行缩小和压缩。完成后，我将使用附加版本值的文件名将它们保存到本地目录。这是代码。

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

我使用 gulp-webserver 在开发环境中提供资产。这是配置。但是，它不会选择目录中的 JS 文件。它只是在页面加载时回退到 index.html。

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

我不确定是什么导致了这种行为。如果有人可以帮助我，我将不胜感激。

【问题讨论】：

您使用什么模块来创建网络服务器，这似乎是网络服务器提供静态资源的问题。
我使用 gulp-webserver。就像我在上面段落中提到的那样。

标签： javascript gulp webserver gulp-concat clientside-caching

【解决方案1】：

现在，不鼓励使用查询字符串进行缓存破坏，具体如下：

大多数代理，尤其是 3.0 版的 Squid，不缓存带有“？”的资源。即使响应中存在 Cache-control: public 标头，在他们的 URL 中也是如此。要为这些资源启用代理缓存，请从对静态资源的引用中删除查询字符串，并将参数编码为文件名本身。

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

相反，您应该 (a) 通过在标头中添加 Cache-Control: no-cache, no-store, must-revalidate 让网络服务器使缓存无效，或者 (b) 在资源的文件名中添加内容哈希。

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

而不是

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

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

祝你好运:)

【讨论】：