webpack中的hash、chunkhash、contenthash区别
hash一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值。如果文件内容改变的话,那么对应文件哈希值也会改变,对应的HTML引用的URL地址也会改变,触发CDN服务器从源服务器上拉取对应数据,进而更新本地缓存。但是在实际使用的时候,这几种hash计算还是有一定区别。
1、hash
hash是跟整个项目的构建相关,只要项目里有文件更改,整个项目构建的hash值都会更改,并且全部文件都共用相同的hash值
2、chunkhash
采用hash计算的话,每一次构建后生成的哈希值都不一样,即使文件内容压根没有改变。这样子是没办法实现缓存效果,我们需要换另一种哈希值计算方式,即chunkhash。
chunkhash和hash不一样,它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk,生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用chunkhash的方式生成哈希值,那么只要我们不改动公共库的代码,就可以保证其哈希值不会受影响。
3、contenthash
在使用chunkhash的例子中,如果index.css被index.js引用了,那么就会共用相同的chunkhash值。但是这样子有个问题,如果index.js更改了代码,css文件就算内容没有任何改变,由于是该模块发生了改变,导致css文件会重复构建。
这个时候,我们可以使用extra-text-webpack-plugin里的contenthash值,保证即使css文件所处的模块里就算其他文件内容改变,只要css文件内容不变,那么不会重复构建。
webpack中的hash、chunkhash、contenthash区别的更多相关文章
- [转]webpack中require和import的区别
webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require.ensure,以及webpack自己定义的require.incl ...
- 详解webpack中的hash、chunkhash、contenthash区别
hash.chunkhash.contenthash hash一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值.如果文件内容改变的话,那么对应文件哈希值也会 ...
- webpack中require和import的区别
commonjs同步语法 经典的commonjs同步语法如下: var a = require('./a'); a.show(); 此时webpack会将a.js打包进引用它的文件中.这是最普遍的情形 ...
- Webpack 中 file-loader 和 url-loader 的区别
如果我们希望在页面引入图片(包括img的src和background的url).当我们基于webpack进行开发时,引入图片会遇到一些问题. 其中一个就是引用路径的问题.拿background样式用u ...
- webpack中imports-loader,exports-loader,expose-loader的区别
Webpack有几个和模块化相关的loader,imports-loader,exports-loader,expose-loader,比较容易混淆.今天,我们来理一理. imports-loader ...
- webpack中hash、chunkhash、contenthash区别
webpack中对于输出文件名可以有三种hash值: 1. hash 2. chunkhash 3. contenthash 这三者有什么区别呢? hash 如果都使用hash的话,因为这是工程级别的 ...
- webpack 打包产生的文件名中,hash、chunkhash、contenthash 的区别
table th:first-of-type { width: 90px; } hash 类型 区别 hash 每一次打包都会生成一个唯一的 hash chunkhash 根据每个 chunk 的内容 ...
- Webpack中hash、chunkhash和contenthash三者的区别
在webpack中有三种的方式生成哈希值,分别为hash.chunkhash和contenthash.这三种方式有着不同的用处,或者说在webpack的不同环境中,会使用不同的方式生成哈希值.那为什么 ...
- webpack中hash与chunkhash区别和需要注意的问题
项目发布时,为了解决缓存,需要进行md5签名,这时候就需要用到 hash 和 chunkhash等. 问题一:hash问题 使用 hash 对js和css进行签名时,每一次hash值都不一样,导致无法 ...
随机推荐
- OPTIONS预检请求
OPTIONS预检请求 背景:像后台发送一个post请求,出错,错误代码403(权限验证未通过),查看请求方法变成OPTIONS.检查请求头得知,当前请求token未带上,问题,为什么post请求变成 ...
- mongodb集群化
转自:https://www.cnblogs.com/nulige/p/7613721.html 一.mongodb主从复制配置 主从复制是MongoDB最常用的复制方式,也是一个简单的数据库同步备份 ...
- HyperLogLog算法分析及其应用
HyperLogLog 算法的原理讲解以及 Redis 是如何应用它的 探索HyperLogLog算法(含Java实现) 神奇的HyperLogLog算法 Sketch of the Day: Hyp ...
- struts2被淘汰的原因
Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个Servlet.在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与视图的数据交互.Struts2 ...
- 关于NB-IoT,没有比这篇更通俗易懂的啦!
来源:内容来自「鲜枣课堂」,谢谢. 大家好,我是小枣君. 今天,我是来“吹NB”的.嗯,标题已经剧透了,这个NB,就是NB-IoT. 在过去的一年多,NB-IoT真的可以说是大红大紫.在通信圈里,除了 ...
- Linux之《荒岛余生》(三)内存篇
原文:https://juejin.im/post/5c00aee06fb9a049be5d3641 小公司请求量小,但喜欢滥用内存,开一堆线程,大把大把往jvm塞对象,最终问题是内存溢出. 大公司并 ...
- WPF样式与触发器(3)
WPF中的各类控件元素, 都可以自由的设置其样式. 诸如: 字体(FontFamily) 字体大小(FontSize) 背景颜色(Background) 字体颜色(Foreground) 边距(Mar ...
- spring事务概念与获取事务时事务传播行为源码分析
一.事务状态:org.springframework.transaction.TransactionStatus isNewTransaction 是否是新事务 hasSavepoint 是否有保存点 ...
- 一文读懂Java线程状态转换
前言 本文描述Java线程线程状态及状态转换,不会涉及过多理论,主要以代码示例说明线程状态如何转换. 基础知识 1. 线程状态 Thread源码中的状态说明: 线程可以有6种状态: New(新建) R ...
- SpringBoot健康检查实现原理
相信看完之前文章的同学都知道了SpringBoot自动装配的套路了,直接看spring.factories文件,当我们使用的时候只需要引入如下依赖 <dependency> <gro ...