温馨提示:本文翻译自stackoverflow.com,查看原文请点击:hash - Long term caching with webpack chunkhash and cache control
cache-control webpack caching hash

hash - 使用webpack chunkhash和缓存控制进行长期缓存

发布于 2020-03-27 16:00:20

我正在使用webpack捆绑所有文件。在webpack中,我使用chunkhash,Md5Hash和清单来为我的每个文件生成唯一的chunkhash,这些文件可以通过浏览器下载。看起来像这样。

styles.3840duiel348fdjh385idfki.css
bundle.488503289dfksdlkor93lfui.js
vendor.sdkkfuuewkf892377rfkjdle.js
image.dkkdiiue9984ujjkfld003kfpp.png

这意味着浏览器可以缓存它们,并且如果不更改哈希值,它将使用缓存的版本。与此同时,例如,我可以只更改样式,仅更改哈希值,因此在部署应用程序时,浏览器将仅下载新样式。

问题是在我的服务器上,我使用以下命令:

Cache-Control: public max-age=31536000

这表示积极的缓存,除非URL,文件名更改,否则浏览器将使用缓存的版本一年。例如,当我更改样式时,我的哈希值已更改,浏览器应从服务器请求新样式。那是根据这篇文章(模式1)以及我发现的其他一些信息https://jakearchibald.com/2016/caching-best-practices/

我的问题是,当我更新某些内容(例如示例样式)时,样式的哈希值发生了更改,然后进行了部署。当我在页面上点击重新加载时,浏览器将不会请求新样式它将服务器缓存的文件。我怎样才能解决这个问题?

我可以使用,Cache-Control: no-cache但这不是解决方案,因为浏览器每次必须检查服务器是否可以使用缓存版本。那就是每次有人访问该页面时都不需要的4个http请求。

查看更多

查看更多

提问者
Igor-Vuk
被浏览
106
Igor-Vuk 2017-07-07 18:18

我是这样做的。我为客户端和服务器捆绑包使用了不同的webpack配置。对于具有bundle.js,vendor.js,styles.css的客户端捆绑包,我使用chunkhash,Cache-Control: public max-age=31536000如我的问题所述。对于提供html(ejs)的服务器捆绑包,我使用Cache-Control: no-cache这很好用,因为浏览器在每次重新加载时都会与服务器联系,但这只是一个http请求。如果未进行任何更改,则浏览器将使用所有资产的缓存版本,因为html中的chunkhash并未更改。

例如,如果我更新样式,并且更改了chashhash,则浏览器将看到在联系时重新加载服务器时,只会下载新样式。