详解webpack中的hash、chunkhash、contenthash区别
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:
执行结果2:
我们可以看到构建生成的文件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:
执行结果2:
我们可以看到,由于采用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:
执行结果2:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一文学会哈希法解题
- 一小时彻底掌握stm32中断。
- Python 爬虫进阶必备 | 关于某虚拟币网站加密签名的分析(难度0.1)
- PHP中的数据库连接持久化
- ClickHouse王炸功能即将来袭?
- 搭建Amoeba实现MySQL主从数据库读写分离
- 如何在centos7上看墙外的世界
- 远程仓库的使用
- 破解某交(y)友(p)app的VIP&&半自动im机器人
- 关于compareTo使用的几种情况
- 高通量数据中批次效应的鉴定和处理(二)
- 通过ansible管理docker容器
- HBASE 技术细节 读取与写入 Region Split与合并介绍
- django2.2+Daphne+nginx+supervisor 生产环境部署
- Python 爬虫进阶必备 | 趣解某不可逆加密(短文警告)