工程化面试专题-Webpack中几种hash的区别

297 阅读2分钟

为什么有hash,他的应用场景是什么

hash 是webpack在生成文件时,根据文件内容进行hash运算,得到的一个hash值。导致打包时,只要文件发生变更,则会生成一个新的hash值用来跟之前的打包文件做区分,避免存在由于浏览器的缓存问题导致无法获取新的打包文件

在webpack中有几种hash,他们的分类依据是?

webpack中存在三种hash:hash,chunkhash,contenthash
分类依据还是要从他们生成的方式不同说起:

  • chunkhash:根据所有的module的_buildHash 生成一个hash值,然后将chunk里包含的module的hash值再算一个hash,这个就是 chunkhash
  • hash:最后再将所有的chunkhash整合起来算一个工程整体的的hash,这个就是工程的hash
  • contenthash:将chunk中是css类型的module合起来算一个 css文件的 contenthash,将js类型的module整合起来算一个 js文件的contenthash

对不同类型的hash什么时候使用,你能给出一些最佳实践么?

  • hash:每改变项目中的任何文件,hash值都会变,导致hash值会经常变化,无法充分利用缓存,不推荐使用

  • chunkhash:在一个chunk中的任何一个mdoule有发生改变,chunk的hash就会改变,推荐使用在一些不怎么变化的三方库中,利用缓存

  • contenthash:chunk中的js改变,或者css改变时生成的contenthash会改变,推荐使用在css文件中,将css文件从chunkhash中剥离出来

webpack打包时Hash码是怎样生成的?随机值存在一样的情况,如何避免?

避免相同随机值webpack在计算hash后分割chunk。产生相同随机值可能是因为这些文件属于同一个chunk,可以将某一个文件提到独立的chunk(如放入entry)