使用 webpack chunkhash 和缓存控制进行长期缓存答案

【问题标题】：Long term caching with webpack chunkhash and cache control使用 webpack chunkhash 和缓存控制进行长期缓存
【发布时间】：2017-06-17 14:15:45
【问题描述】：

我正在使用 webpack 来打包我的所有文件。在 webpack 中，我使用 chunkhash、Md5Hash 和 manifest 来为每个通过浏览器下载的文件生成唯一的 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/

我的问题是，当我更新某些东西时，例如样式，样式的哈希值会发生变化，我会部署它。除非我在页面上点击 reload，否则浏览器不会请求新样式。它将为缓存的文件提供服务。我该如何解决这个问题？

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

【问题讨论】：

伊戈尔，我也面临同样的问题。谁有解决方案，请在这里发布吗？
嗨，阿比。请参阅下面的解决方案。

标签： caching hash webpack cache-control

【解决方案1】：

我解决这个问题的方法是在我的文件名中再添加一个数字（即 Date.now()），如下所示。

文件名：[name].${Date.now().valueOf()}.[chunkhash].js 在可预见的时间内，这非常可靠。我看到这种方法的唯一缺点是：每次发布都会强制刷新所有捆绑包。

但是，在某些情况下，如果模块没有更改但它们的顺序发生了变化（因此模块 id），则呈现 chunkhash 以创建问题。模块 id 和 order 不是 chunkhash 的一部分！请参考：https://github.com/webpack/webpack/issues/1856

其他替代方法是使用命名模块（我相信这会对性能产生一些影响）除了可能涉及命名我不确定的模块。

【讨论】：

【解决方案2】：

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

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

【讨论】：

我想，这和你上面描述的一样。 Cache-Control: private max-age=31536000 但是当 chunkhash 改变时浏览器仍然没有刷新 JS。 :(

【解决方案3】：

只有在您的页面加载时才会指示浏览器加载您的资产...这就是它的工作方式。您可以轮询或使用任何类型的浏览器推送来检测后端更改，然后强制您的用户刷新他们的浏览器。

这不是缓存问题，也不是浏览器问题……只是事实是，一旦您获得信息，它可能已经过时了。您将不得不忍受它或创建一个解决方法。

将其视为贵公司咖啡机旁边的日历，该公司本周六有一个活动“派对”。你看到它并跑向你的同事告诉他们这个好消息。与此同时，在日历上写下事件的人意识到他犯了一个错误，并将事件更改为下周六。你没有这些新信息，所以只要你不去喝咖啡，你就会向你的同事提供错误的信息。了解这些变化的唯一方法是，如果有人会在你去喝咖啡之前通知你……例如，在日历上写下活动的人会向所有人发送一封电子邮件，为他的错误道歉，并且派对定于下周六。

【讨论】：