Webpack 的 hash/chunkhash/contenthash 有什么区别？用错导致缓存失效？

Question

仓乃文 · Accepted Answer

Webpack 提供了三种 hash 类型，用错了会导致缓存频繁失效或缓存不更新。

三种 hash 对比：
```
| 类型        | 计算范围              | 变化时机               | 推荐度 |
|------------|---------------------|----------------------|-------|
| hash       | 整个构建             | 任何文件变化，所有hash都变 | 不推荐 |
| chunkhash  | 同一 chunk          | chunk 内任何文件变化     | 多入口 |
| contenthash| 文件内容             | 只有内容变了hash才变     | 推荐   |
```

问题演示：
```javascript
// 用 hash：修改任何一个文件，所有 JS 的 hash 都变
// 用户要重新下载所有 JS

// 用 contenthash（推荐）：只有文件内容真正变化，hash 才变
output: {
  filename: "[name].[contenthash:8].js",
}
```

contenthash 的坑：
```javascript
// 坑：Webpack 4 中 contenthash 可能不稳定
// 修复：
optimization: {
  moduleIds: "deterministic",  // Webpack 5
}

// 坑：修改注释导致 contenthash 变化
// 修复：Terser 去掉注释
new TerserPlugin({
  terserOptions: { output: { comments: false } },
})
```

Vite 默认使用 contenthash，不需要额外配置。

补充说明：
- 规则：永远用 contenthash，不用 hash
- contenthash 精确到文件内容级别，缓存利用率最高
- Webpack 4 需要配置 moduleIds: "deterministic" 保证 hash 稳定
- Vite 默认就是 contenthash，省心
- 验证方法：不改代码重新 build，hash 不应该变