Reactjs客户端在部署后需要强制刷新

Question

每次在生产环境或其他环境中进行新的部署时，客户端需要使用ctrl shift r强制刷新并清除缓存以更新用户界面。该项目使用Create-React-App创建。已经向HTML文件添加了元标签，但未能解决问题。

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

我有没有漏掉任何配置？

- Gonzalez

---

你试过等大约10分钟吗？ - Konrad

@KonradLinkowski 是的，有时需要超过一天的时间。 - Gonzalez

Answer 1

你的src/index.js文件应该长这样：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.register();

只需要更改

标签中的内容即可。

serviceWorker.register();

为

serviceWorker.unregister();

- nicolas.hacala

Answer 2

在 head 标签内添加元标记以确保页面内容不被缓存。

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

- Waled Ahmad

Answer 3

试试这个，也许你需要缓存控制

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'> 

或者阅读这个 https://webpack.js.org/guides/caching/

- Ilkin Nazarov

Answer 4

你使用的 CRA 版本是哪个？如果是由于 ServiceWorker 导致的，那么你应该禁用 ServiceWorker。

import { unregister } from './registerServiceWorker'; unregister();

- Ahammed K M

---

我正在使用react-scripts 4.0.3，如何知道它是否来自ServiceWorker？ - Gonzalez