React SPA强制加载新的JS构建（包括移动版）

Question

我目前每次构建用于生产的脚本时都会遇到问题，浏览器不会加载任何新的JS。

我正在使用create-react-app。使其起作用的唯一方法是手动清除缓存。

我试过放了，window.location.reload(true)但是它仍然不会获取最新的JS。

然后我尝试将其放在我的index.html上

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

他们都没有工作。

该浏览器不会加载任何新的JS，尤其是针对移动设备（Chrome Android，Firefox）。

我正在使用Cloudflare，并且已经尝试过purge cache。

还有其他解决方案可以强制浏览器加载新脚本吗？

谢谢

Answer 1

一种常见的方法是在 JS 文件中放置一个唯一的哈希值，以便浏览器关闭并获取它认为与之前完全不同的文件。

如果您使用的是 Webpack（我假设您使用的是 create-react-app），那么您可以添加[hash]到输出 JS 文件名中：

output: {
    filename: 'bundle.[hash].js',
},