webpack中的hash、chunkhash、contenthash区别

2,489 阅读2分钟

共同点:这三种hash都是用来控制缓存的,hash一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值。如果文件内容改变的话,那么对应文件哈希值也会改变,对应的HTML引用的URL地址也会改变,触发CDN服务器从源服务器上拉取对应数据,进而更新本地缓存。

区别:

hash

hash是针对整个工程的,所以只要修改任意的文件,整个工程的hash值都会更改,比如你只改了js,但css ,img这些hash都会一起被更改,因为他们用的是同一个hash值

可以从上图清晰的看见每个压缩后的文件的hash值是一样的,所以对于没有改变的模块而言,这样做显然不恰当,因为缓存失效了嘛。此时,chunkhash的用途随之而来。

chunkhash

chunkhash根据不同的入口Entry,进行依赖文件解析、构建对应的chunk,生成对应的哈希值。在生产环境构建时,会把公共库和程序入口文件区分开,单独打包构建,接着我们采用chunkhash的方式生成哈希值,那么只要我们不改动公共库的代码,就可以保证其哈希值不会受影响。并且webpack4中支持了异步import功能,固,chunkhash也作用于此,如下:

我们将各个模块的hash值 (除主干文件) 改为chunkhash,然后重新build一下,可得下图:

每个js文件的hash值不一样了,但是因为我们css也是模块引入到js里面的,所以js和css的hash是一样的 如:test2.js和test.css。这就导致 ,如果我css没更改,只改了js,css的hash也会变,或者只改了css,js没改,js的hash值也会变;这时候就需要contenthash了。

contenthash

contenthash是针对文件内容级别的,只有你自己模块的内容变了,那么hash值才改变,所以我们可以通过contenthash解决上诉问题。如下:

看到这,你记住这三者的区别了吗,如果get到了,就请赐一个“赞”吧