Question

有人为此建议了一个similar question，但这仅解释了这些哈希之间的区别。

但是，我仍然不知道何时应该选择[hash]而不是[contenthash]？有人可以告诉我一个例子吗？

===前身===

webpack文档解释了以下不同的哈希类型：

哈希：

为每个版本生成的唯一哈希值

内容哈希：

为提取的内容生成的哈希

chunkhash：

基于每个块内容的哈希：

对于何时使用哪种类型的哈希，我仍然感到困惑。

[hash]是为每个构建生成的，但是在使用以下配置多次运行webpack构建后，我没有发现哈希值发生变化。

module.exports = {
  output: {
    filename: '[name].[hash].js'
  }
}

Webpack版本4.41.2

我还发现react-scripts中的webpack配置正在对js和css文件使用contenthash，但是对诸如图像之类的资产文件使用哈希，这也令人困惑，为什么他们要这样做{{1 }}二进制文件的更好选择？

Answer 1

考虑到您生成了三个捆绑包：

main.js
main.css
vendor.js

main.js文件中引用的main.css。

哈希：

将为每个构建生成哈希值。生成的哈希数所有捆绑的文件都相同。

例如：

Hash: 66e665r76798c278ytr6

Generated Files:
main.66e665r76798c278ytr6.js
main.66e665r76798c278ytr6.css
vendor.66e665r76798c278ytr6.js

所有三个文件将包含相同的哈希号。该哈希将相同只要您没有更改文件的任何内容。即使您运行许多构建在不更改任何内容的情况下，哈希数将相同。

ChunkHash：

在这种情况下，将基于入口点生成哈希数所有文件都不同。

Hash: 66e665r76798c278ytr6

Generated Files:
main.77e665r76798c278ytr6.js
main.78e665r76798c278ytr6.css
vendor.79e665r76798c278ytr6.js

如果您尚未更改供应商文件，则生成的供应商文件的哈希将相同。但是，如果您添加任何新的供应商，哈希号将被更改。

如果对main.js进行了任何更改，则main.js和main.css 由于将根据入口点更改哈希数，因此将具有新的哈希数。

ContentHash：

仅当您对特定内容进行任何更改时，才会生成哈希文件，每个文件都有唯一的编号。

例如，如果仅更改main.js文件，则仅生成新哈希对于更改后的文件，其他两个哈希将与以前的版本相同

Chunkhash和ContentHash都为每个生成的文件生成哈希数。唯一的不同是ChunkHash根据入口点生成哈希。

在大多数情况下，您将使用ContentHash进行生产。

借助contenthash，您可以在浏览器中实现长期缓存。只要哈希保持不变，浏览器就会提供缓存的文件。

长期缓存： 为了缩短应用程序的加载时间，我们经常使用缓存。在应用程序的初始加载期间，我们可以设置标题对于资产作为Cache-Control：max-age = 31536000。之后，浏览器将缓存资产及后续请求将从缓存中提供。

无散列：

考虑到您已经对某些资产进行了更改（例如main.js），因为您将max-age指定为31536000，所以新更改将没有得到体现，浏览器将继续从缓存中提供服务。

带有散列：

要覆盖此问题，我们在所有文件中使用哈希。如果您对文件进行了任何更改，则新的哈希将为生成，浏览器将其视为新请求。

示例：

您仅在main.js中进行了更改。如果为[hash]，则所有文件都将获得新的哈希号。浏览器会将这三个文件视为新文件，并提出三个新请求以获取文件

[contenthash]并非如此。如果提到contenthash，则仅main.js哈希将被更改。其他两个文件将具有相同的哈希号，并将继续从浏览器缓存中提供服务。

这将缩短您的应用加载时间。

如果您需要实施长期缓存，建议您   使用contenthash而不是普通哈希。

生成哈希会增加应用编译时间。所以你会   在生产过程中使用contenthash / hash。