在react中防止浏览器缓存文件最佳解决方案是什么

Question

我的问题是，当我部署新版本的react web生产时，一些用户浏览器显示以前部署的旧版本，我的用户必须按ctrl+f5清除缓存浏览器，然后我想哪一个不好的解决方案，请给我建议最好的解决方案谢谢兄弟。

Answer 1

这可能是因为您的web服务器正在设置缓存控制响应标头，该标头被设置为较大的值。你能检查一下devtools中的值吗？

​

​

缓存控制的作用的一个简单解释是，它告诉浏览器，浏览器最多可以使用n分钟的缓存资源。因此，只有在n分钟之后，浏览器才会发送对该资源的新请求。

由于您有一个react应用程序( web应用程序)，因此浏览器请求index.html，然后它将为您的react应用程序获取js包。

当您推送更新的版本时，浏览器不知道有更新。由于index.html已被缓存，因此它将继续使用它。直到缓存时间到期，然后它将再次获取，这一次它将获得最新的js包。

根据您的服务器，您需要弄清楚如何将index.html的cache-control头设置为值no-cache。下面是我如何在firebase主机中设置它的一个示例，

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  },
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "headers": [
      {
        "source": "/service-worker.js",
        "headers": [{ "key": "Cache-Control", "value": "no-cache" }]
      },
      {
        "source": "/index.html",
        "headers": [{ "key": "Cache-Control", "value": "no-cache" }]
      },
      {
        "source": "/static/**/*",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000"
          }
        ]
      }
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

由于create react应用程序会自动将webpack构建配置为在文件名中生成具有不同散列的静态文件，因此可以为其设置较大的缓存值。

Answer 2

这是因为，在默认情况下，服务工作者确实会进行缓存，因此您应该检查您的react项目index.js文件，并检查服务工作者是否已注册。serviceWorker.register()。

如果已注册，则注销服务工作者serviceWorker.unregister()。

上面的方法是相当激烈的，因为它可能会影响你的用户体验。建议你配置你的PWA来满足你特定的缓存需求。有关如何使用服务工作者的更多信息，请访问资源"https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker“。

如果您的应用程序需要缓存，您的后端将发送适当的响应头。