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值都不一样,导致无法 ...
随机推荐
- AngularJS简介与四大特征
1.1 AngularJS简介 AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.A ...
- PHP中直接使用sql语句
SELECT * FROM `tf_user` WHERE (`company_id` = '117' OR `other_company_ids` LIKE '%117,%' OR `other_c ...
- Django的学习——全局的static和templates的使用
一.问题 首先我们在进行Django框架搭建的时候我们需要建立一个全局的变量,一是为了实现代码的复用,二是为了方便管理,如下图的样式 二.解决 1.修改setting里面的配置文件①templates ...
- windows10下录屏
windows10自带了录屏功能.运行win+G即可打开.如果出现错误,可以运行如下PS脚本. https://files.cnblogs.com/files/mqingqing123/reinsta ...
- .net core (领域事件,并发 for update) 工作内容记录
这周工作,因为要对几个不同的表进行货币增加,锁定,所以 用了领域事件和并发 for update ,先记录一下 领域事件 ,Dapper 事务 ,sql for update 这几个点 头大,最近工 ...
- 一款神器,批量手机号码归属地查询软件,支持导出Excel表格
很多人查询手机号码归属地,还在一个一个百度去查太慢了,如果有几万个那么是不是要百度很久 有一款软件很多人都不知道,可以吧号码复制进去,即使里面有汉字也可以把手机号码挑出来,然后查询归属地,还具有号码去 ...
- python 排序 归并排序
算法思想 迭代法: 归并算法一共有两种思想,笼统的说,这两种思想的区别就在于一种不分割未排序的序列(直接将序列看为n个个数为1的子序列),这种称为---迭代法 直接从队头开始,两两合并为一个个数为2的 ...
- 用Python分析国庆旅游景点,告诉你哪些地方好玩、便宜、人又少
注:本人参考“裸睡的猪”公众号同名文章,学习使用. 一.目标 使用Python分析出国庆哪些旅游景点:好玩.便宜.人还少的地方,不然拍照都要抢着拍! 二.获取数据 爬取出行网站的旅游景点售票数据,反映 ...
- iOS - 逆向调试自用工具(reveal 14 Hopper Go2Shell ifunboxmac MachOView Alfred Go2Shell iTerm)
研究了挺长一段时间的逆向感觉没啥可弄的了,再深处对我也用处不大,渐渐兴趣有些掉头了.最近有问我要工具的朋友,分享一些常用工具给用到的朋友. 用法自己百度吧,这里不再赘述. 图例(希望看到你想要的): ...
- Vue+element 解决浏览器自动填充记住的账号密码问题
我们在做form表单的时候,会发现,浏览器会自动的将我们之前保存的密码, 自动的填充到表单中input 为 type="password" 的框中 登录页面也就算了,但是注册页面就 ...