Webpack，为什么我们需要哈希来有效缓存文件？

Question

来自https://webpack.github.io/docs/long-term-caching.html,

第一段说

To effectively cache your files, they should have a hash or version in their URL.

URL 中的 hash/version 使浏览器能够长期缓存文件的目的是什么？

Answer 1

通常，将在不久的将来可能会更改的文件缓存较长时间并不是一个好主意，因为您的客户端可能不会加载这些文件的最新版本。因此，缓存 bundle.js 可能会导致以下问题：在更新代码后，由于某些缓存设置，浏览器仍会加载旧的 bundle.js。

解决这个问题的一个好方法（在使用 webpack 时很容易使用）是对生成的包进行哈希处理，并将该哈希值附加到文件名中。所以你的第一个版本叫做 bundle.ad736defe.js 并且在任何修改之后这个名字也会改变，例如 bundle.dffe3983.js。有了这个，您可以永远缓存这些文件，因为对代码的每次更改都会产生一个新的文件名，因此只要在 index.html 中引用完全相同的文件，客户端就会使用缓存的文件一旦您更改了影响捆绑包内容的任何内容，它将立即下载新版本。

Webpack 具有内置的功能，通过提供包含 [hash] 模式的输出文件名可以非常容易地激活。

output: {
  path: path.resolve(__dirname, "dist"),
  publicPath: "/",
  filename: "bundle-[hash].js"
}

这会将您的散列包放入 dist/bundle.<calculated_hash>.js。

因为您事先不知道文件名，您可以使用强大的 HtmlWebpackPlugin，它会自动为您插入具有正确哈希值的脚本标签。

Webpack，为什么我们需要哈希来有效缓存文件？

Webpack, Why do we need hash to cache files effectively?

browser-cache

webpack