Question

当我更新我的网站时，运行npm run build并将新文件上传到服务器我仍在查看我的网站的旧版本。我的项目的回购是 https://github.com/Alfrex92/serverlessapps

如果没有React，我可以看到我的网站的新版本缓存破坏。我这样做：

上一个文件

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

新文件

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

如何使用create react app执行此类操作或实现缓存清除？

创建反应应用程序的github中有很多线程，但没有人有正确/简单的答案。

Answer 1

编辑：create-react-app 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()

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

Answer 2

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

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

您可能希望将以下内容添加到服务器端响应标头

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

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

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

我认为通过这种方式你仍然可以保留那个糟糕的服务工作者，最新的内容将显示在N + 1负载上（第二次刷新）

希望这会有所帮助......

Answer 3

对于服务人员，他们似乎从选择退出更改为选择加入。这是更改README的提交，它的示例类似于Kerry G的答案：

https://github.com/facebook/create-react-app/commit/1b2813144b3b0e731d8f404a8169e6fa5916dde4#diff-4e6ec56f74ee42069aac401a4fe448ad

Answer 4

正如此处先前的一些回答所提到的那样，在查看旧版本的React应用时，服务工作者和（缺乏）缓存标头都可能对您不利。

关于 caching ，React文档指出以下内容：

将Cache-Control: max-age=31536000用于build/static 资产，而Cache-Control: no-cache则是安全的有效的起点，可确保您的用户的浏览器始终检查更新的index.html文件，并缓存所有 build/static个文件一年。请注意，您可以使用由于文件内容安全，build/static上的一年到期哈希嵌入到文件名中。

如@squarism所述，较早版本的create-react-app默认为选择退出服务工作者注册，而较新版本为选择加入。您可以在official docs中了解有关此内容的更多信息。如果您从较早版本的create-react-app开始并且想要切换到新的行为，那么将您的配置与最新的template进行匹配是一个非常简单的过程。

缓存破坏与创建反应应用

5 个答案: