Cache破坏与CRA反应

Question

当我更新我的网站，运行npm运行构建和上传新的文件到服务器，我仍然在寻找我的网站的旧版本。

没有反应，我可以看到我的网站的新版本与高速缓存破坏。我这样做：

上一档

<link rel="stylesheet" href="/css/styles.css">

新文件

<link rel="stylesheet" href="/css/styles.css?abcde">

我如何做这样的事情或实现缓存破坏与创建反应应用？

在应用程序的GitHub中有很多线程，但是没有人有一个正确的/简单的答案。

Answer 1

编辑: v2现在默认禁用服务工作人员。

这个答案只适用于CRA v1

这可能是因为你的网络工作者。

如果您查看您的index.js文件，您可以看到

registerServiceWorker();

从没想过它做了什么？如果我们查看它从其中导入的文件，我们可以看到

// 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.

如果你想删除网络工作者，不要仅仅删除这一行。导入取消寄存器，并调用它在您的文件，而不是寄存器。

import { unregister } from './registerServiceWorker';

然后打电话

unregister()

当您取消注册时，至少需要一次刷新才能使其正常工作。

Answer 2

当我使用create-react-app (并部署到heroku)时，我也遇到了同样的问题。它一直在显示我的应用程序的旧版本。

我发现问题似乎在浏览器端，它用过时的js包缓存我的旧index.html。

您可能希望在服务器端响应头中添加以下内容

"Cache-Control": "no-store, no-cache"

或者，如果您也使用heroku create-react-app-buildpack，则更新static.json文件。

"headers": { 
    "/**": { 
        "Cache-Control": "no-store, no-cache" 
    } 
}

我认为以这种方式，您仍然可以保留该服务工作者，并且最新的内容将显示在N+1加载(第二次刷新)上。

希望这能帮上忙。

Answer 3

正如前面的一些答案所提到的，无论是服务工作者还是(缺乏)缓存头，在看到你的反应应用程序的旧版本时，都会与你合谋。

当涉及到缓存时，React状态如下

对您的Cache-Control: max-age=31536000资产使用build/static，对其他一切使用Cache-Control: no-cache是一个安全和有效的起点，它确保用户的浏览器将始终检查更新的index.html文件，并将所有build/static文件缓存一年。请注意，您可以在build/static上安全地使用一年到期，因为文件内容散列被嵌入到文件名中。

正如@四方主义所提到的，旧版本的registration app默认为选择退出的服务工作者注册，而较新的版本是opt-in。您可以在官方文件中阅读更多有关这方面的内容。这是一个非常简单的过程，使您的配置与最新的模板，如果您开始从一个旧版本的创建-反应-应用程序，你想要切换到新的行为。

相关问题：

• 如何避免对app进行缓存
• ReactJS:如何防止浏览器缓存静态文件？
• 如何清除reactjs中的浏览器缓存