Webpack 4 : hash and contenthash and chunkhash, 什么时候用哪个？

Question

有人建议了 similar question到这个，但它只解释了这些散列之间的差异。

但是，我还是不知道什么时候应该选择[hash]而不是 [contenthash] ?有人可以告诉我一个示例情况吗？

=== 以前的 body ===

webpack 文档解释了不同的哈希类型如下:

https://webpack.js.org/configuration/output/#outputfilename

哈希:

Unique hash generated for every build

内容哈希:

Hashes generated for extracted content

大块哈希:

Hashes based on each chunks' content:

我仍然对何时使用哪种类型的哈希感到困惑。
[hash]为每个构建生成，但是在使用以下配置多次运行 webpack build 后，我没有发现我的哈希值发生了变化。

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

Webpack 版本 4.41.2

我还发现 react-scripts 里面的 webpack 配置对 js 和 css 文件使用 contenthash，但对图像等 Assets 文件使用 hash，这也令人困惑，他们为什么这样做，是 [hash]二进制文件的更好选择？

Answer 1

假设您有三个生成的包:

main.js
main.css
vendor.js

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

哈希:

Hash number will be generated for each build. Generated Hash Number will be same for all the bundled files.

例如:

Hash: 66e665r76798c278ytr6

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

所有三个文件都将包含相同的哈希数。这个哈希是一样的
只要您没有更改文件的任何内容。即使你运行了很多构建
不改变任何内容，哈希数将相同。

块哈希:

In this case, Hash number will be generated based on the entrypoints and it will be different for all the files.

Hash: 66e665r76798c278ytr6

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

如果您没有更改供应商文件，则生成的供应商文件的哈希值将相同。
但是如果你添加任何新的供应商，哈希数将会改变。

如果您在 main.js 中进行了任何更改，则 main.js 和 main.css
将有新的散列数，因为散列数是根据入口点更改的。

内容哈希:

Hash will be generated only if you made any changes in the particular file and each file will be having the unique has number.

例如，如果您只更改了 main.js 文件，则只会生成新的哈希
对于更改后的文件，其他两个哈希将与之前的构建相同

Chunkash 和 ContentHash 都为每个生成的文件生成哈希数。
唯一的区别是 ChunkHash 基于入口点生成哈希。

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

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

https://github.com/webpack/webpack.js.org/issues/2096

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

无散列:

考虑您对某些 Assets 进行了更改(例如 main.js)，因为您已将 max-age 指定为 31536000，新的更改将
没有得到反射(reflect)，浏览器将继续从缓存中提供服务。

使用哈希:

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

示例:

您仅在 main.js 中进行了更改。在 [hash] 的情况下，所有文件都将获得新的哈希数。浏览器
将所有三个都视为新的，并提出三个新的请求来获取文件

[contenthash] 不是这种情况。如果您提到 contenthash，那么只会更改 main.js 哈希。
其他两个文件将具有相同的哈希值，并将继续从浏览器缓存中提供服务。

这将改善您的应用加载时间。

If you need to implement long term caching, then it is advisable to use contenthash instead of normal hash.

Generating hashes will increase the app compilation time. So you will be using contenthash/hash during production.

有关长期缓存的更多信息: https://developers.google.com/web/fundamentals/performance/webpack/use-long-term-caching