Why hash?

Each time a front-end static resource needs to be updated, the client must re-download the resource. Because getting resources from the network is slow, this is obviously very inefficient. This is why browsers cache static resources. However, there is a drawback: if you do not change the file name when deploying the new version, the browser will assume that it has not been updated and will continue to use the old version in the cache.

The file name plus hash ensures that the client can get the latest version when we apply the release update.

hash

  • Based on the build
  • All chunk files use the same hash.
  • Changes in the contents of any file in the project affect the hash of all chunk files
entry:{
index:'./src/index.js'.// Index chunk contains index.js and index.css
vendor:['react'.'react-dom'] // One for each entry
}
output:{
filename:'[name].[hash].js'.// Chunkhash and contenthash cannot be used here, this can be hash
},
plugins: [new MiniCssExtractPlugin({
filename:'[name].[hash].css'./ / the main entry name})]Copy the code
  • Modifying the CSS file changes the hash content of index.css, index.js, and vendor.js
Dist ├ ─ ─ images │ └ ─ ─ accd7e392b0ddd8dd91f19edd9530282. PNG ├ ─ ─ but a0b3b5557d9b4fb15cbe. CSS ├ ─ ─ Index. A0b3b5557d9b4fb15cbe. Js ├ ─ ─ but c4275599e9a903cd4997. CSS ├ ─ ─ but c4275599e9a903cd4997. Js ├ ─ ─ index. The HTML ├ ─ ─ Vendor. A0b3b5557d9b4fb15cbe. Js └ ─ ─ vendor. C4275599e9a903cd4997. JsCopy the code

chunkhash

  • Based on the webpackentry point
  • Any file changes will only affect the chunk it belongs to, not other chunks.
entry:{
index:'./src/index.js'.// Index chunk contains index.js and index.css
vendor:['react'.'react-dom'] // One for each entry
}
output:{
filename:'[name].[chunkhash].js'.// Chunkhash and contenthash cannot be used here, this can be hash
},
plugins: [new MiniCssExtractPlugin({
filename:'[name].[chunkhash].css'./ / the main entry name})]Copy the code
  • The modification (CSS and index.js) changes the hash of index. CSS and index.js, but does not affect the hash of vendor
Dist ├ ─ ─ images │ └ ─ ─ accd7e392b0ddd8dd91f19edd9530282. PNG ├ ─ ─ index. 1 e3c981f3953ec527872. CSS ├ ─ ─ Index. 1 e3c981f3953ec527872. Js ├ ─ ─ index. 85 beca714bffd11c5c3d. CSS ├ ─ ─ index. 85 beca714bffd11c5c3d. Js ├ ─ ─ Index. Bde5e43b7c6b7cd96777. CSS ├ ─ ─ but bde5e43b7c6b7cd96777. Js ├ ─ ─ index. The HTML └ ─ ─ vendor. C6fa41a5d8c4f0002b09. JsCopy the code

contenthash

  • Hash generated based on the file content
  • The scope of influence is limited toThis document
entry:{
index:'./src/index.js'.// Index chunk contains index.js and index.css
vendor:['react'.'react-dom'] // One for each entry
}
output:{
filename:'[name].[contenthash].js'.// Chunkhash and contenthash cannot be used here, this can be hash
},
plugins: [new MiniCssExtractPlugin({
filename:'[name].[contenthash].css'./ / the main entry name})]Copy the code
  • Modify the CSS content. Only the CSS hash is changed
Dist ├ ─ ─ images │ └ ─ ─ accd7e392b0ddd8dd91f19edd9530282. PNG ├ ─ ─ index. 1 fd2b4940eda072b7e6b. Js ├ ─ ─ Index. 30 bcc0d7e84e3620dc24. CSS ├ ─ ─ index. 4 a410042517d488eecd4. CSS ├ ─ ─ index. The HTML └ ─ ─ vendor. D67f4f207409e75aec17. JsCopy the code

Scenarios and Usage

  • Production only requires contenthash to change the hash of which file to modify. Other hashes can continue to be read from the cache to speed up access
  • The development environment does not need to display names directly with hashes, because generating hashes also consumes resources, and caching affects the development experience.