[譯文] Webpack 4: hash and contenthash and chunkhash, when to use which?

In webpack 5, "hash" is deprecated and now you have the only option to use "contenthash"

在 webpack 5 中，“hash” 已被棄用，現在唯一的選擇是使用 “contenthash”

本篇問題的主要解釋為 Webpack version 4.41.2 為版本

但解釋真的蠻清楚的，可以幫助我理解（？）所以做個筆記。

問題 - Question

someone have suggested a similar question to this one, but it only explains the differences between those hashes.

BUT, I still can't figure out when should I choose [hash] instead of [contenthash]? Can someone show me an example situation?

有人提出了一個類似的問題，但只是解釋了這些 Hash 值之間的差異。

但是，我仍然無法弄清楚在什麼情況下應該選擇 [hash] 而不是 [contenthash]？有人可以給我展示一個例子嗎？

=== previous body ===

The webpack docs explain different hashes type as following:

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

hash: Unique hash generated for every build

contenthash: Hashes generated for extracted content

chunkhash: Hashes based on each chunks' content

=== 原文 ===

Webpack文檔對不同類型的哈希進行了以下解釋：

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

hash： 每次構建都生成唯一的 Hash 值。
contenthash： 對提取的內容生成 Hash 值。
chunkhash： 基於每個 chunk 的內容生成 Hash 值。

I am still confused about when to use which type of the hashes.

[hash] is generated for every build, but after running webpack build multiple times with following config, I didn't find my hash changed.

我仍然對何時使用哪種類型的 Hash 值感到困惑。

[hash]會為每次構建生成一個 Hash 值，但是在使用以下配置多次運行 webpack 構建後，我發現我的 Hash 值並沒有改變。

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

Webpack version 4.41.2

I also find that the webpack config inside react-scripts is using contenthash for js and css file, but hash for assets files like images, this is also confusing, why are they doing it that way, is [hash] the better option for binary files?

我還發現，react-scripts 內部的 webpack 配置將 contenthash 用於 js 和 css 文件，但將 hash 用於像圖像這樣的資源文件，這也令人困惑，為什麼他們這樣做，[hash] 對於二進制文件來說是更好的選擇嗎？

回答 - Answer

Consider you have three generated bundles:

假設你有三個生成的 bundles：

main.js
main.css
vendor.js

main.css referred in main.js file.

main.css 引用於 main.js 檔案。

Hash

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

Hash（哈希）： 每次構建都會生成一個 Hash 值。所有打包的文件將使用相同的 Hash 值。

For Example:

Hash:

66e665r76798c278ytr6

# 生成的文件
Generated Files:

main.66e665r76798c278ytr6.js
main.66e665r76798c278ytr6.css
vendor.66e665r76798c278ytr6.js

All the three files will contain the same hash number. This hash will be same as long as you havent changed any content of the files. Even if you run many builds without changing any content, hash number will be same.

這三個文件將包含相同的 Hash 值。只要你沒有更改文件的任何內容，這個 Hash 值就會維持不變。即使你多次進行構建而沒有更改任何內容，Hash 值也將保持相同。

ChunkHash

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

ChunkHash（片段哈希）： 在這種情況下，Hash 值是根據入口點生成的，並且對於所有文件都是不同的。

For Example:

Hash: 

66e665r76798c278ytr6

# 生成的文件
Generated Files:

main.77e665r76798c278ytr6.js
main.78e665r76798c278ytr6.css
vendor.79e665r76798c278ytr6.js

If you havent changed the vendor files, hash will be the same for the generated vendor file. But if you add any new vendor, hash number will be changed.

If you made any changes in main.js, both main.js and main.css will be having new hash number since hash number is changed based on the entrypoint.

如果你沒有更改供應商文件，則生成的供應商文件的 Hash 值將保持相同。但如果你添加了新的供應商，Hash 值將會變化。

如果你對 main.js 進行了任何更改，main.js 和 main.css 都將具有新的 Hash 值，因為 Hash 值是根據入口點而改變的。

ContentHash

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

ContentHash（內容哈希）： 只有在你對特定文件進行了更改時，才會生成 Hash 值，並且每個文件都具有唯一的 Hash 值。

For Example, If you changed only main.js file, new hash will be generated only for the changed file, other two hash will be same as previous build

Both Chunkhash and ContentHash generate hash number for each and every generated file. Only difference is ChunkHash generate hash based on the entrypoint.

In most cases, you will be using ContentHash for production.

With the help of contenthash, you can implement long term caching in the browsers. Browser will serve the cached file as long as the hash remains same.

例如，如果你只更改了 main.js 文件，則只會為更改的文件生成新的 Hash 值，其他兩個文件的 Hash 值將與之前的構建相同。

ChunkHash 和 ContentHash 都為每個生成的文件生成 Hash 值。唯一的區別是 ChunkHash 根據入口點生成 Hash 值。

在大多數情況下，你將在生產環境中使用 ContentHash。

通過 contenthash 的幫助，你可以在瀏覽器中實現長期緩存。只要 Hash 值保持不變，瀏覽器將提供緩存的文件。

Use [contenthash] over [hash] and [chunkhash] for better long term caching · Issue #2096 · webpack/webpack.js.org

Long Term Caching

Long Term Caching: To improve the app loading time, we often use caching. During initial load of the app, we can set the header for the assets as Cache-Control: max-age=31536000. After that, browser will cache the assets and subsequent requests will be served from the cache.

Long Term Caching（長期快取）： 為了改善應用程式的載入時間，我們通常使用快取。

在應用程式的初始載入期間，我們可以將資源的標頭設定為 Cache-Control: max-age=31536000。

之後瀏覽器將快取這些資源，並從快取中提供後續的請求。

Without Hashing

Without Hashing: Consider you have made changes in some assets(say main.js), since you have specified max-age as 31536000, new changes will not get reflected, browser will continue to serve from cache.

Without Hashing（不使用哈希）： 假設你對某些資源進行了更改（例如 main.js），由於你將 max-age 設定為 31536000，新的更改將不會反映出來，瀏覽器將繼續從快取中提供該資源。

With Hashing

With Hashing: To overrride this, we use hash across all the files. If you made any changes in the files, new hash will be generated and browser consider it as a new request.

With Hashing（使用哈希）： 為了覆蓋（上方不使用 Hash 值的）這種情況，我們在所有文件中使用 Hash 值。如果你對文件進行了任何更改，將生成新的 Hash 值，瀏覽器將將其視為新的請求。

Example:

You have made changes only in main.js. In case of [hash], all the files will get the new hash number. browser will consider all the three as new and make three new requests to get the files

This is not the case with [contenthash]. If you mentioned contenthash, then only main.js hash will be changed. Other two files will have the same hash number and will continue to serve from browser cache.

This will improve your app loading time.

你只對 main.js 進行了更改。如果使用 [hash]，所有文件都將獲得新的 Hash 值。瀏覽器將把所有這三個文件視為新的請求，並發出三個新的請求以獲取這些文件。

而如果使用 [contenthash]，則只有 main.js 的 Hash 值將更改。其他兩個文件將具有相同的 Hash 值，並將繼續從瀏覽器快取中提供。

這將改善應用程式載入時間。

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.

如果你需要實現長期快取，建議使用 contenthash 而不是普通的 hash。

生成 Hash 值將增加應用程式的編譯時間。因此，在生產環境中，你將使用 contenthash / hash。

For more info about long term caching:

Make use of long-term caching