使用 CRA React 清除缓存 [英] Cache busting with CRA React

问题描述

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

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.

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

Without React, I can see the new version of my site with cache-busting. I do this:

上一个文件

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

新建文件

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

我该如何做这样的事情或使用 create react app 实现缓存破坏?

How can I do something like this or to achieve cache busting with create react app?

在 create react app 的 GitHub 上有很多关于这个的线程，但没有人有正确/简单的答案.

There are many threads in the GitHub of create react app about this but no one has a proper/simple answer.

推荐答案

create-react-app v2 现在默认禁用 service worker

create-react-app v2 now have the service worker disabled by default

此答案仅适用于 CRA v1

这可能是因为您的网络工作者.

This is probably because of your web worker.

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

If you look into your index.js file you can see

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.

如果你想删除 web worker，不要只删除一行.导入取消注册并在您的文件中调用它而不是注册.

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.

import { unregister } from './registerServiceWorker';

然后调用

unregister()

附言注销后，至少需要刷新一次才能生效

P.S. When you unregister, it will take at least one refresh to make it work

这篇关于使用 CRA React 清除缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！