Javascript 如何在每次发布后强制进行完全刷新(重新下载缓存文件)
我有一个使用Javascript 如何在每次发布后强制进行完全刷新(重新下载缓存文件),javascript,reactjs,caching,webpack,publish,Javascript,Reactjs,Caching,Webpack,Publish,我有一个使用ReactJS构建的网站,该网站正在不断开发,我几乎每天都发布一个新版本并构建,使用我网站的人有一个问题,即即使他们执行F5并刷新页面,所有内容都是内存缓存的,例如块文件,这意味着他们无法获得最新的更改,他们必须手动清除浏览器缓存才能获得一些结果 因此,我的问题是,我如何告诉我的应用程序“嘿,这是一个新版本”,因此如果刷新F5,它将下载所有内容而不使用缓存文件 非常感谢任何解决方案 谢谢 更新01: 我刚刚尝试更改我的jsconfig.json文件,希望更改块名,如下所示: {
ReactJS
构建的网站,该网站正在不断开发,我几乎每天都发布一个新版本并构建,使用我网站的人有一个问题,即即使他们执行F5
并刷新页面,所有内容都是内存缓存的
,例如块
文件,这意味着他们无法获得最新的更改,他们必须手动清除浏览器缓存才能获得一些结果因此,我的问题是,我如何告诉我的应用程序“嘿,这是一个新版本”,因此如果刷新
F5
,它将下载所有内容而不使用缓存文件非常感谢任何解决方案
谢谢 更新01: 我刚刚尝试更改我的
jsconfig.json
文件,希望更改块名,如下所示:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": [
"src"
],
"output": {
"chunkFilename": "[name].chunkv2.0.js"
}
}
但是这些块没有一个不同,这意味着它们的名称仍然是[somehash].chunk.js
我做错了什么?您最好的办法是改进构建管道,并确保您正在破坏浏览器缓存。阅读,虽然这是针对CSS的,但原则也适用于JavaScript
如果您正在使用Webpack,请在该主题上签出它自己的内容。您最好的选择是改进构建管道并确保您正在破坏浏览器缓存。阅读,虽然这是针对CSS的,但原则也适用于JavaScript 如果您使用的是Webpack,请在主题上签出它自己的 我如何告诉我的应用程序“嘿,这是一个新版本”?因此,如果刷新F5,它将下载所有内容,而不使用缓存文件 当然可以 希望更改块名称,如
main.bad98a53.chunk\u v0.1.j
没必要
您如何通知网站的更改?
首先,您应该在webpack中使用[contenthash]
作为块名,当您发布新版本时,如果块的内容发生更改,contenthash
将发生更改
其次,使用fetch获取包含脚本的HTML文本内容,并将其与前面的类似字符串的内容进行比较。案文希望如此
"
<html>
//...
<script src="main.11bsfas21.js"></script>
</html>
"
// after publish
"
<html>
//...
<script src="main.aagssh.js"></script>
</html>
"
这只是一个示例,您可以像显示模型组件一样自定义回调。
主要工作是比较HTML的文本,如果contenthash
发生变化,HTML的文本将不相等并调用回调
使用location.reload(true)
,这将强制网站使用最新的源代码,而不是使用缓存资源
我如何告诉我的应用程序“嘿,这是一个新版本”?因此,如果刷新F5,它将下载所有内容,而不使用缓存文件
当然可以
希望更改块名称,如main.bad98a53.chunk\u v0.1.j
没必要
您如何通知网站的更改?
首先,您应该在webpack中使用[contenthash]
作为块名,当您发布新版本时,如果块的内容发生更改,contenthash
将发生更改
其次,使用fetch获取包含脚本的HTML文本内容,并将其与前面的类似字符串的内容进行比较。案文希望如此
"
<html>
//...
<script src="main.11bsfas21.js"></script>
</html>
"
// after publish
"
<html>
//...
<script src="main.aagssh.js"></script>
</html>
"
这只是一个示例,您可以像显示模型组件一样自定义回调。
主要工作是比较HTML的文本,如果contenthash
发生变化,HTML的文本将不相等并调用回调
使用
location.reload(true)
,这将强制网站使用最新的源代码,而不是使用缓存资源。解决此问题的方法是使用与版本号或发布日期/时间对应的查询字符串。然后将其附加到所请求资源的URL中,因为查询字符串发生了更改,所以就浏览器的缓存行为而言,它是一个不同的URL。接下来,遇到了相同的问题。我一直以来解决这个问题的方法是使用与版本号或发布日期/时间相对应的查询字符串。然后将其附加到所请求资源的URL中,因为查询字符串发生了更改,所以就浏览器的缓存行为而言,它是一个不同的URL。接下来,遇到相同的问题,可以将版本名添加到使用webpack生成的所有块中,我想是这样的:main.bad98a53.chunk.js
应该是main.bad98a53.chunk\u v0.1.js
@AliAhmadi Webpack本质上就是JavaScript,所以你可以随心所欲。您只需要实现它。答案是肯定的,你可以这样做。是否有可能为所有使用webpack生成的块添加一个版本名,我想是这样的:main.bad98a53.chunk.js
应该是main.bad98a53.chunk_v0.1.js
@AliAhmadi webpack本质上就是JavaScript,所以你可以随心所欲。您只需要实现它。答案是肯定的,你可以这样做。