重置生产应用程序的浏览器缓存

Question

所以目前我有一个托管在亚马逊S3上的反应应用程序，它是通过云前沿CDN提供的，但是，每次我发布新的产品版本，最终用户都必须深度刷新整个页面（因为上一个版本的内容仍然保留在浏览器缓存中）。有没有什么我只能在发布产品版本时使CDN缓存和浏览器缓存无效。顺便说一句，我使用GitLab ci。

Answer 1

我们使用的是AwsPublish插件

const day = 86400;
  const farFuture = { 'Cache-Control': `max-age=${day * 365}` };
  const future = { 'Cache-Control': `max-age=${day * 7}` };
  const noCache = { 'Cache-Control': 'no-cache' };
  const gzipTypes = '**/*.{html,css,js,svg,ico,json,txt,wasm,map,mem}';
  const cacheBustedTypes = '**/*.{css,js,gif,jpeg,jpg,png,svg,webp,ttf,woff,woff2,wasm}';
  const cachedTypes = '**/*.{ico}';
  const noCacheTypes = '**/*.{html,json,xml,txt}';
  const otherTypes = ['**/*', `!${cacheBustedTypes}`, `!${cachedTypes}`, `!${noCacheTypes}`];

  const publisher = $.awspublish.create(awsSettings);

  const options = {
    force,
  };

  return gulp
    .src(source, { base })
    .pipe($.if(gzipTypes, $.awspublish.gzip()))
    .pipe($.if(cacheBustedTypes, publisher.publish(farFuture, options)))
    .pipe($.if(cachedTypes, publisher.publish(future, options)))
    .pipe($.if(noCacheTypes, publisher.publish(noCache, options)))
    .pipe($.if(otherTypes, publisher.publish(null, options)))
    .pipe($.if(sync, publisher.sync()))
    .pipe($.awspublish.reporter());
});

添加索引。noCacheTypes中的html。Webpack会为css和js文件生成chunkhash，一旦更改它们，缓存就会被破坏。我们在使用github操作的同时还使用了这个gulp脚本。