详解webpack中的散列,chunkhash contenthash区别 - 行业资讯 - 肥雀云

<>强散列、chunkhash contenthash
　　

哈希一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值。如果文件内容改变的话,那么对应文件哈希值也会改变,对应的HTML引用的URL地址也会改变,触发CDN服务器从源服务器上拉取对应数据,进而更新本地缓存。但是在实际使用的时候,这几种散列计算还是有一定区别。
　　我们先建一个测试案例来模拟下:

项目结构
　　

我们的项目结构很简单,入口文件index.js,引用了index.css。然后新建了jquery.js和测试。js作为公共库。
　　

　　　　//index.js 　　　　要求(“。/index.css”) 　　模块。出口=function () { 　　控制台。日志(“我是杰克”) 　　var=12 　　} 　　之前　　　　　　//index.css 　　　　.selected: { 　　显示:flex; 　　过渡:6; 　　用户选择:没有; 　　背景:线性渐变(底,白色、黑色); 　　} 　　之前　　　　

接着我们修改webpack.config.js来模拟不同散列计算

<强>哈希
　　

哈希是跟整个项目的构建相关,只要项目里有文件更改,整个项目构建的散列值都会更改,并且全部文件都共用相同的散列值
　　

　　　　　　var extractTextPlugin=要求(“extract-text-webpack-plugin”), 　　路径=要求(“路径”) 　　　　模块。出口={ 　　背景:path.join (__dirname“src”), 　　条目:{ 　　主:“。/index.js”, 　　小贩:[’。/jquery.js”、“。/. js”) 　　}, 　　模块:{ 　　规则:[{ 　　测试:/\ . css/美元, 　　用途:extractTextPlugin.extract ({ 　　回退:“style-loader”, 　　使用:“css-loader” 　　}）　　}) 　　}, 　　输出:{ 　　路径:路径。加入(__dirname '/dist/js '), 　　文件名:“包。[名字]。(哈希). js”, 　　}, 　　插件:[ 　　新extractTextPlugin (“. ./css/包。[名字]。(哈希). css”) 　　］　　} 　　　　

根据上面的配置,我们执行webpack命令之后,可以得到下面的结果
　　

采用散列计算的执行结果1:

详解webpack中的散列,chunkhash, contenthash区别

执行结果2:

详解webpack中的散列,chunkhash, contenthash区别

我们可以看到构建生成的文件散列值都是一样的,所以散列计算是跟整个项目的构建相关,同一次构建过程中生成的哈希都是一样的

<强> chunkhash
　　

采用散列计算的话,每一次构建后生成的哈希值都不一样,即使文件内容压根没有改变。这样子是没办法实现缓存效果,我们需要换另一种哈希值计算方式,即chunkhash。
　　

chunkhash和散列不一样,它根据不同的入口文件(条目)进行依赖文件解析,构建对应的块,生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用chunkhash的方式生成哈希值,那么只要我们不改动公共库的代码,就可以保证其哈希值不会受影响。
　　

　　　　　　var extractTextPlugin=要求(“extract-text-webpack-plugin”), 　　路径=要求(“路径”) 　　　　模块。出口={ 　　… 　　… 　　输出:{ 　　路径:路径。加入(__dirname '/dist/js '), 　　文件名:“包。[名字]。[chunkhash] . js”, 　　}, 　　插件:[ 　　新extractTextPlugin (“. ./css/包。[名字]。[chunkhash] . css”) 　　］　　} 　　之前　　　　

采用chunkhash计算的执行结果1:

详解webpack中的散列,chunkhash, contenthash区别