详解webpack中的hash、chunkhash、contenthash区别


Posted in Javascript onJanuary 05, 2018

hash、chunkhash、contenthash

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

项目结构

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

//index.js

 require('./index.css')
 module.exports = function(){
  console.log(`I'm jack`)
  var a = 12
 }
//index.css

 .selected : {
   display: flex;
   transition: all .6s;
   user-select: none;
   background: linear-gradient(to bottom, white, black);
 }

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

hash

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

var extractTextPlugin = require('extract-text-webpack-plugin'),
  path = require('path')
 
 module.exports = {
  context : path.join(__dirname,'src'),
  entry:{
  main: './index.js',
  vender:['./jquery.js','./test.js']
  },
  module:{
  rules:[{
   test:/\.css$/,
   use: extractTextPlugin.extract({
   fallback:'style-loader',
   use:'css-loader'
   })
  }]
  },
  output:{
  path:path.join(__dirname, '/dist/js'),
  filename: 'bundle.[name].[hash].js',
  },
  plugins:[
  new extractTextPlugin('../css/bundle.[name].[hash].css')
  ]
 }

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

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

详解webpack中的hash、chunkhash、contenthash区别

执行结果2:

详解webpack中的hash、chunkhash、contenthash区别

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

chunkhash

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

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

var extractTextPlugin = require('extract-text-webpack-plugin'),
  path = require('path')
 
 module.exports = {
  ...
  ...
  output:{
  path:path.join(__dirname, '/dist/js'),
  filename: 'bundle.[name].[chunkhash].js',
  },
  plugins:[
  new extractTextPlugin('../css/bundle.[name].[chunkhash].css')
  ]
 }

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

详解webpack中的hash、chunkhash、contenthash区别

执行结果2:

详解webpack中的hash、chunkhash、contenthash区别

我们可以看到,由于采用chunkhash,所以项目主入口文件Index.js及其对应的依赖文件Index.css由于被打包在同一个模块,所以共用相同的chunkhash,但是公共库由于是不同的模块,所以有单独的chunkhash。这样子就保证了在线上构建的时候只要文件内容没有更改就不会重复构建

contenthash

在chunkhash的例子,我们可以看到由于index.css被index.js引用了,所以共用相同的chunkhash值。但是这样子有个问题,如果index.js更改了代码,css文件就算内容没有任何改变,由于是该模块发生了改变,导致css文件会重复构建。
这个时候,我们可以使用extra-text-webpack-plugin里的contenthash值,保证即使css文件所处的模块里就算其他文件内容改变,只要css文件内容不变,那么不会重复构建。

var extractTextPlugin = require('extract-text-webpack-plugin'),
  path = require('path')
 
 module.exports = {
  ...
  ...
  output:{
  path:path.join(__dirname, '/dist/js'),
  filename: 'bundle.[name].[chunkhash].js',
  },
  plugins:[
  new extractTextPlugin('../css/bundle.[name].[contenthash].css')
  ]
 }

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

详解webpack中的hash、chunkhash、contenthash区别

执行结果2:

详解webpack中的hash、chunkhash、contenthash区别

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
javascript中setInterval的用法
Jul 19 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
浅谈webpack对样式的处理
Jan 05 #Javascript
js实现HTML中Select二级联动的实例
Jan 05 #Javascript
详解tween.js 中文使用指南
Jan 05 #Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 #Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 #Javascript
vue 中directive功能的简单实现
Jan 05 #Javascript
浅谈React前后端同构防止重复渲染
Jan 05 #Javascript
You might like
一道关于php变量引用的面试题
2010/08/08 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
JavaScript中的比较操作符>、=、
2014/12/31 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
python 开发的三种运行模式详细介绍
2017/01/18 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
DNA测试:Orig3n
2019/03/01 全球购物
美容院考勤制度
2014/01/30 职场文书
小学生安全保证书
2014/02/01 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
环保建议书100字
2014/05/14 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
六一儿童节致辞
2015/07/31 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python