webpack5中filename和chunkFileName到底用chunkhash还是contenthash？

Question

webpack5中filename和chunkFileName到底用chunkhash还是contenthash？
chunkhash：入口相关。
contenthash：内容相关，一般情况下css用contenthash，可以更好利用缓存。
疑问如下：
contenthash和文件本身相关，但是如果多个文件打到一个chunk里，那么使用contenthash和chunkhash其实没什么差别，因为文件修改了，chunkhash也会变，那么到底怎么区分使用哪种hash呢？

Answer 1

先说结论：

• For long term caching better use contenthash over chunkhash.
• chunkhash just backward compatibility

作者原话：

sokra [2:59 PM]
A chunk contains modules i. e. a.js, b.css, and c.wasm. This results in 3 assets being generated JS, CSS and WASM. `[chunkhash]` is the hash of the complete chunk, which is JS + CSS + WASM. `[contenthash]` is the hash of the content of the file, which is different for each asset.

evilebottnawi [3:10 PM]
I.e. better use `[contenthash]` for chunks?

sokra [5:26 PM]
@evilebottnawi better use `contenthash`.

sokra [5:30 PM]
we probably should rename that in webpack 5 to `[hash]`.

evilebottnawi [5:34 PM]
Only one question why we need `chunkhash` after implement `contenthash` :smile: ?

sokra [5:39 PM]
not sure if there is a use case where chunkhash is better, but at least for backward-compat

个人理解：

contenthash: 它现在可以更聪明用realcontenthash，忽略一些空格啊，换行啊等其实与实体内容无关的内容，以获得更加长效的缓存。而且他确实只跟自己有关，但是有一个隐式的依赖关系，即自己引用的资源name改变，自己本身也会改变。btw，rollup的维护者聊过如何在循环引用模式下生成contenthash非常有趣，建议找来看看

chunkhash 我硬想到一个调试和cdn的场景。我没有验证过，不过想一想好像可行。即获取可预测的依赖关系图，可以由一个已知的chunkhash name 得到它相关联的依赖名称/图。

Answer 2

在提出这个问题之前，首先明白chunkhash和contenthash的区别

比如我们一个MPA项目，有A页面和B页面，为了提升访问性能，我们构建出来的文件可能是这样的（为了快速说明，就只提js相关）：

• a.js
• b.js
• a-b-common.js
• a-common.js
• b-common.js

在上面这个例子，a 和 b 两个入口页面极其关联的资源分别是一个chunk，一个完成chunk所有的内容，算出的hash称为chunkhash，而单个文件自己算出来的hash 称为contenthash。

a 和 b是入口，会使用filename，而关联资源，被称为chunkFileName

试想这样一个场景，我们一个变更，只改了a页面的一个文字信息，如果你都采用chunkfileName, 那么上线发布后，就会影响b页面的访问，因为有个a-b-common.js。

所以并不是说一般css用contenthash，而是为了在有效缓存利用，我们会采用合理的hash，来保证文件访问最大化利用缓存，并保证是最新的。