英文:
React Vite clear Cache on client side
问题
我有一个部署在AWS Amplify上的React应用。但是，每当我将新功能推送到流水线时，该功能不会立即出现在实时网站上。我了解构建需要时间，但即使Amplify通知我构建已完成，问题仍然存在。我认为这与浏览器缓存有关，因为在无痕标签中打开网站可以正常工作。
因此，有谁知道如何解决这个问题吗？我不能要求客户每次更新时都清除他们的缓存...
英文:
I have a react application deployed to AWS Amplify. However, every time I push a new feature to the pipeline, the feature will not appear on the live site right away. I understand that the build takes time but the problem persists even after Amplify notifies me that the build was completed. I believe it has to do with the browser cache, because opening up the site in an incognito tab works.
Therefore, does anyone know how to address the issue? I could not ask clients to clear their cache every time I made an update...
答案1
得分: 3
你可以在你的public/index.html文件上添加Cache-Control标签。
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
示例：
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
英文:
You can add Cache-Control tag on your public/index.html
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
Example.
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
答案2
得分: 2
你也可以通过检查，然后转到网络选项卡，禁用浏览器缓存，然后使用 npm run dev --force 标志重新构建依赖项并刷新浏览器。有关更多信息，请访问 Vite 文档网站 https://vitejs.dev/guide/dep-pre-bundling.html#browser-cache。
英文:
you can also disable your broswer caches by inspect then go to your network tab and disable your caches then run npm run dev with flag --force to rebuild dependencies again and refresh your broswer
more info can be found here in vite doc website https://vitejs.dev/guide/dep-pre-bundling.html#browser-cache
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论