Question

我有大量的JS文件在部署过程中已经过版本化，可用于JS缓存清理。它看起来像这样。

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

我进行缩小＆amp;使用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
  }));
});

我不确定导致此行为的原因。如果有人能帮助我，我非常感激。

Answer 1

如今，不建议根据以下条件用查询字符串进行缓存无效

大多数代理（最著名的是通过3.0版Squid up）都不会使用“？”来缓存资源。即使响应中存在Cache-control：公共标头，也不会在其URL中显示该错误。要为这些资源启用代理缓存，请从对静态资源的引用中删除查询字符串，然后将参数编码为文件名本身。

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

相反，您应该（a）通过将标头添加到Cache-Control: no-cache, no-store, must-revalidate来让Web服务器使缓存无效，或者（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

祝你好运：）

Gulp webserver无法加载缓存的JS资源

1 个答案: