Webpack 的 chunkhash 和 contenthash 有什么区别？

推荐答案

chunkhash 和 contenthash 都是 Webpack 中用于生成文件哈希值的配置选项，但它们的使用场景和生成方式有所不同。

• chunkhash：基于 chunk 的内容生成哈希值。同一个 chunk 中的所有文件共享相同的 chunkhash，适用于缓存整个 chunk 的场景。
• contenthash：基于文件内容生成哈希值。每个文件的 contenthash 是独立的，适用于缓存单个文件的场景，尤其是当文件内容发生变化时，只有该文件的哈希值会改变。

本题详细解读

chunkhash 的使用场景

chunkhash 是根据 chunk 的内容生成的哈希值。在 Webpack 中，chunk 是由多个模块组成的代码块。当 chunk 中的任何一个模块发生变化时，整个 chunk 的 chunkhash 都会改变。因此，chunkhash 适用于需要缓存整个 chunk 的场景，比如在代码分割时，每个 chunk 文件都可以通过 chunkhash 来确保缓存的有效性。

contenthash 的使用场景

contenthash 是根据文件内容生成的哈希值。与 chunkhash 不同，contenthash 是针对单个文件的。当文件内容发生变化时，只有该文件的 contenthash 会改变，而其他文件的哈希值保持不变。这使得 contenthash 特别适合用于缓存静态资源文件，比如 CSS 文件、图片等。通过使用 contenthash，可以确保只有内容发生变化的文件才会被重新加载，从而优化缓存策略。

示例配置

在 Webpack 配置中，可以通过 output.filename 和 output.chunkFilename 来分别设置 chunkhash 和 contenthash：

module.exports = {
  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[contenthash].js',
  },
};

在这个配置中，主入口文件会使用 chunkhash，而异步加载的 chunk 文件会使用 contenthash。这样可以确保主入口文件和异步加载的文件都能根据内容的变化进行有效的缓存管理。

总结

• chunkhash：适用于缓存整个 chunk，chunk 内容变化时，哈希值变化。
• contenthash：适用于缓存单个文件，文件内容变化时，哈希值变化。