hash、chunkhash、contenthash三者区别
hash
所有文件哈希值相同,只要改变内容跟之前的不一致,所有哈希值都改变,没有做到缓存意义
hash
是跟整个项目的构建相关,构建生成的文件 hash 值都是一样的,所以 hash 计算是跟整个项目的构建相关,同一次构建过程中生成的 hash 都是一样的,只要项目里有文件更改,整个项目构建的 hash 值都会更改。
如果出口是 hash,那么一旦针对项目中任何一个文件的修改,都会构建整个项目,重新获取 hash 值,缓存的目的将失效。
chunkhash
同一个模块,就算将 js 和 css 分离,其哈希值也是相同的,修改一处,js 和 css 哈希值都会变,同 hash,没有做到缓存意义
它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的 chunk,生成对应的 hash 值。我们在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用 chunkhash 的方式生成 hash 值,那么只要我们不改动公共库的代码,就可以保证其 hash 值不会受影响。
由于采用 chunkhash
,所以项目主入口文件 main.js 及其对应的依赖文件 main.css 由于被打包在同一个模块,所以共用相同的 chunkhash。
这样就会有个问题,只要对应 css 或则 js 改变,与其关联的文件 hash 值也会改变,但其内容并没有改变,所以没有达到缓存意义。
contenthash
只要文件内容不一样,产生的哈希值就不一样
contenthash
表示由文件内容产生的 hash 值,内容不同产生的 contenthash 值也不一样。在项目中,通常做法是把项目中 css 都抽离出对应的 css 文件来加以引用。
使用 chunkhash 存在一个问题,当在一个 js 文件引入 css 文件,编译后 他们的 hash 是相同的,而且,只要 js 文件内容发生改变,与其关联的 css 文件 hash 也会改 变,针对这种情况,可以把 css 从 js 中抽离出来并使用 contenthash
所以 css 文件最好使用 contenthash。