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

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

回复
阅读 624
2 个回答

先说结论:

  • 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 得到它相关联的依赖名称/图。

在提出这个问题之前,首先明白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,来保证文件访问最大化利用缓存,并保证是最新的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏