如何解决重置生产的create-react-app应用程序的浏览器缓存
因此,目前我在Amazon S3上托管了一个React应用程序,并且该应用程序通过Cloudfront CDN提供服务,但是,我制作的每个新生产版本中,最终用户都必须深度刷新(ctrl+shift+r
)整个页面(因为prev构建的内容保留在浏览器缓存中)。仅在发布生产版本时,我才能使CDN缓存和浏览器缓存无效吗?我使用 GitLab ci btw。
解决方法
我们在gulp中使用AwsPublish插件。 这是gulp文件的代码
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,gif,jpeg,jpg,png,webp,ttf,woff,woff2,wasm}';
const cachedTypes = '**/*.{ico}';
const noCacheTypes = '**/*.{html,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类型添加index.html。 Webpack将为css和js文件生成chunkhash,更改它们后,缓存将被破坏。 我们正在使用github动作以及该gulp脚本。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。