使用CRA React进行缓存清除

Question

当我更新网站时，请运行npm run build并将新文件上传到服务器，但我仍在查找网站的旧版本。

没有React，我可以看到带有缓存清除功能的新版本站点。我这样做：

上一个档案

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

新文件

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

我该怎么做或通过create react app实现缓存清除？

在GitHub上有很多关于此的react app线程，但是没有人给出正确/简单的答案。

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()

PS当您注销时，至少需要刷新一下才能使其正常工作