reactjs 使用 CRA React 清除缓存
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49604821/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cache busting with CRA React
提问by Alfrex92
When I updated my site, run npm run build and upload the new files to the server I am still looking the old version of my site.
当我更新我的网站时，运行 npm run build 并将新文件上传到服务器我仍然在寻找我网站的旧版本。
Without React, I can see the new version of my site with cache-busting. I do this:
没有 React，我可以通过缓存破坏查看我网站的新版本。我这样做：
Previous file
上一个文件
<link rel="stylesheet" href="/css/styles.css">
New file
新文件
<link rel="stylesheet" href="/css/styles.css?abcde">
How can I do something like this or to achieve cache busting with create react app?
我该如何做这样的事情或使用 create react app 实现缓存破坏？
There are many threads in the GitHub of create react app about this but no one has a proper/simple answer.
create react app 的 GitHub 中有很多关于此的主题，但没有人有正确/简单的答案。
回答by Kerry Gougeon
EDIT: create-react-app v2 now have the service worker disabled by default
编辑：create-react-app v2 现在默认禁用 service worker
This answer only apply for CRA v1
此答案仅适用于 CRA v1
This is probably because of your web worker.
这可能是因为您的网络工作者。
If you look into your index.js file you can see
如果您查看 index.js 文件，您可以看到
registerServiceWorker();
Never wondered what it did? If we take a look at the file it got imported from we can see
从来没有想过它做了什么？如果我们看一下它从中导入的文件，我们可以看到
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read {URL}
// This link also includes instructions on opting out of this behavior.
If you want to delete the web worker, don't just delete the line. Import unregister and call it in your file instead of the register.
如果要删除 Web Worker，请不要只删除该行。导入 unregister 并在您的文件中调用它而不是在 register 中调用它。
import { unregister } from './registerServiceWorker';
and then call
然后打电话
unregister()
P.S. When you unregister, it will take at least one refresh to make it work
PS 注销后，至少需要刷新一次才能生效
回答by Ryan Chu
I had the same issue when I use create-react-app( and deploy to heroku). It keeps showing the old version of my app .
我在使用create-react-app（并部署到heroku）时遇到了同样的问题。它一直显示我的应用程序的旧版本。
I found the problem seems to be on the browser side, it caches my old index.htmlwith its outdated js bundle
我发现问题似乎出在浏览器端，它index.html用过时的 js 包缓存了我的旧文件
You may want to add the following to your server side response header
您可能希望将以下内容添加到您的服务器端响应标头中
"Cache-Control": "no-store, no-cache"
or if you are also using heroku create-react-app-buildpack, update the static.jsonfile
或者，如果您还使用 heroku create-react-app-buildpack，请更新static.json文件
"headers": {
"/**": {
"Cache-Control": "no-store, no-cache"
}
}
I think in this way you can still keep that poor service worker , and the latest content will be shown on the N+1 load (second refresh)
我认为这样你仍然可以保留那个糟糕的 service worker，并且在 N+1 负载上会显示最新的内容（第二次刷新）
Hope this helps...
希望这可以帮助...
回答by bszom
As mentioned by some of the previous answers here, both the service worker and the (lack of) cache headers can conspire against you when it comes to seeing old versions of your React app.
正如这里之前的一些答案所提到的，在查看旧版本的 React 应用程序时，服务工作者和（缺乏）缓存标头都可能与您共谋。
The React docs state the following when it comes to caching:
React 文档在谈到缓存时声明如下：
Using
Cache-Control: max-age=31536000for yourbuild/staticassets, andCache-Control: no-cachefor everything else is a safe and effective starting point that ensures your user's browser will always check for an updatedindex.htmlfile, and will cache all of thebuild/staticfiles for one year. Note that you can use the one year expiration onbuild/staticsafely because the file contents hash is embedded into the filename.
使用
Cache-Control: max-age=31536000你的build/static资产，以及Cache-Control: no-cache其他一切是确保你的用户的浏览器会经常检查更新的安全和有效抓手index.html文件，将缓存所有的build/static文件为一年。请注意，您可以build/static安全地使用一年到期，因为文件内容哈希已嵌入到文件名中。
As mentioned by @squarism, older versions of create-react-app defaulted to opt-outof service worker registration, while newer versions are opt-in. You can read more about that in the official docs. It's quite a straightforward process to match you configuration to the latest templateif you started with an older version of create-react-app and you want to switch to the new behaviour.
正如@squarism 所提到的，旧版本的 create-react-app 默认选择退出服务工作者注册，而新版本则选择加入。您可以在官方文档中阅读更多相关信息。如果您开始使用旧版本的 create-react-app 并且想要切换到新行为，那么将您的配置与最新模板相匹配是一个非常简单的过程。
Related questions:
相关问题：
回答by squarism
It appears that they changed from opt-out to opt-in with regards to the service worker. Here's the commit that changed the README and it has examples similar to Kerry G's answer:
似乎他们在服务工作者方面从选择退出变为选择加入。这是更改自述文件的提交，它的示例类似于 Kerry G 的回答：
回答by Michal Ciesielski
If your problem is with resources statically referenced in index.html, such as .css files or additional .js files (e.g. configuration files), you can declare a React environment variable, assign a unique value to it and reference it in your index.html file.
如果您的问题是在 index.html 中静态引用的资源，例如 .css 文件或其他 .js 文件（例如配置文件），您可以声明一个 React 环境变量，为其分配一个唯一值并在您的索引中引用它。 .html 文件。
In your build script (bash):
在您的构建脚本 (bash) 中：
REACT_APP_CACHE_BUST={e.g. build number from a CI tool} npm run build
In your index.html:
在你的 index.html 中：
<link rel="stylesheet" href="%PUBLIC_URL%/index.css?cachebust=%REACT_APP_CACHE_BUST%" />
The variable name has to start with REACT_APP_. More about environment variables in React: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables.
变量名必须以 REACT_APP_ 开头。更多关于 React 中的环境变量：https: //facebook.github.io/create-react-app/docs/adding-custom-environment-variables。
