秒懂:使用js验证hash, content hash , chunk hash的区别

一、使用js验证hash, content hash , chunk hash的区别

1、计算一般的 Hash(以简单字符串为例)

  • 使用crypto-js库来进行哈希计算,需提前引入npm install crypto-js库。

crypto-js: 是一个JavaScript加密算法库,用于实现各种加密算法和哈希函数,它提供了一种简单而强大的方式来执行加密操作,包括对称加密算法、非对称加密算法和哈希函数等。

  • 实现:这里以一个简单字符串来验证,使用CryptoJS.SHA256进行加密, 字符串改变,生成的加密值肯定不同。
  • 应用:一般开发登录模块的时候会用到,服务端存储的是这个哈希值,当再次登录输入密码时,会再次计算密码的哈希值,并和存储的哈希值做比较。
const CryptoJS = require("crypto-js");// Hash
const password = "this is my passward 1234";
const hash = CryptoJS.SHA256(password).toString();
console.log("Hash:", hash);

在这里插入图片描述

2、计算 Content Hash(基于文本内容整体的哈希)

  • 首先准备一个txt文件,然后通过fs读取文件内容。
    text.txt:
这是一段测试的文本!!!
11111111111111111
222222222
3333333333
44444444

fs模块: Node.js提供的对系统文件及目录进行读写操作的模块。
fs.readFile(filename,[option],callback) 方法读取文件。

  • 实现:加密方法还是和上面的一样,只不过是通过fs获取的文件内容。可以看到,内容哈希关注的是文件内容本身的完整性。如果文件内容发生变化,内容哈希值也会随之改变。
  • 场景:在内容分发网络(CDN)中判断资源是否更新等场景,只要内容没变化,内容哈希值就不会变。
const CryptoJS = require("crypto-js");
const fs = require("fs");// Content Hash
fs.readFile("src/test.txt", "utf-8", (err, data) => {if (err) {console.error("Error reading file:", err);return;}const contentHash = CryptoJS.SHA256(data).toString();console.log("Content Hash: ", contentHash);
});

在这里插入图片描述

3、计算 Chunk Hash(将内容分块后计算哈希)

  • 和上面内容哈希的获取方式一样,只不过需要将获取到的文件划分成多个chunk,然后对每个chunk进行加密。
const CryptoJS = require("crypto-js");
const fs = require("fs");// Chunk Hash
const CHUNK_SIZE = 10; // 每个块的大小(字节)
fs.readFile("src/test.txt", "utf-8", (err, data) => {if (err) {console.log("err", err);return;}const chunkHashes = []; // 块hash值数组for (let i = 0; i < data.length; i += CHUNK_SIZE) {const chunkContent = data.slice(i, i + CHUNK_SIZE);const chunkHash = CryptoJS.SHA256(chunkContent).toString();chunkHashes.push(chunkHash);}console.log("Chunk Hashes", chunkHashes);
});

slice()方法:是 JavaScript 中用于提取字符串或数组部分内容的方法。它返回一个新的字符串或数组,包含从原字符串或数组中提取的部分元素,原字符串或数组本身不会被修改。

语法string.slice(startIndex[, endIndex])。其中startIndex是提取的起始位置(索引从 0 开始),endIndex是提取的结束位置(不包括该位置的字符)。如果省略endIndex,则提取从startIndex到字符串末尾的部分。

  • 改变txt文件中的后面一点内容,然后观察到前面的chunk的hash都没变,只有后面的两个hash改变了。
    在这里插入图片描述

  • 场景:这种块哈希的计算方式常用于大型文件传输等场景,在传输或存储过程中可以分别验证每个块的完整性,通过对比每个块的哈希值与原始的块哈希是否一致来判断块数据是否准确。

二、webpack配置中这三种hash的作用分析

1、Hash(模块标识符哈希)

  • 在webpack中,hash是基于整个构建内容(包括所有模块、资源等)生成的一个哈希值,每次构建时,只要一个文件改变,这个哈希值就会改变。
module.exports = { //...其他配置 output: { filename: '[name].[hash:8].js' }  //:8就是指定生成的hash值是8位的
};
  • 优点: 简单直接,可以用于版本控制和缓存清除。当新的构建发生时,由于hash值改变,浏览器会重新下载新的资源文件,保证用户获取到最新的内容。
  • 缺点: 比如即使一个css文件一个小改动,重新构建时哈希值都会改变,可能导致不必要的缓存失效,影响性能。

2、Content Hash(内容哈希)

  • 在webpack中,content-hash是根据文件内容(具体模块或资源的内容)生成的哈希值。它只和文件自身的内容有关,与其他文件或构建过程中的其他因素无关。
module.exports = { //...其他配置 output: { filename: '[name].[contenthash].js' } 
};
  • 优点: 精确地基于内容进行哈希计算,使得只有内容发生变化的文件,其文件名才会改变。这对于缓存管理非常有利。
  • 缺点: 计算成本相对较高,因为需要对每个文件内容进行单独的哈希计算。不过,在现代构建工具和硬件条件下,这个缺点通常可以接受。

3、Chunk Hash(块哈希)

  • 在webpack中,chunk-hash是基于 Webpack 打包后的代码块(chunk)生成的哈希值。Webpack 在打包过程中会将相关的模块组合成代码块,chunk-hash就是针对这些代码块进行计算的。
module.exports = { //...其他配置 output: { filename: '[name].[chunkhash].js' } 
};
  • 优点: 可用于代码分割(code-splitting)场景。如:一个 Web 应用有多个入口点(如main.jsvendor.js),通过chunk-hash可以为每个入口点对应的代码块生成独立的哈希值。这样,当一个代码块(如vendor.js包含第三方库)的内容没有变化时,其对应的文件名不会因为其他代码块(如main.js)的变化而改变,有利于浏览器缓存的有效利用。
  • 缺点: 如果代码块的划分发生变化(例如,调整了 Webpack 的代码分割策略),即使模块内容没有改变,chunk-hash值也可能会改变,从而影响缓存。

这篇文章我们通过js验证了一下hash, content hash , chunk hash的区别,并对比了一下webpack中的使用场景,希望对对webpack这里配置有疑惑的伙伴有帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/63235.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入浅出:PHP中的字符串处理函数全解析

文章目录 引言理解字符串创建字符串使用单引号使用双引号 访问和修改字符串访问字符修改字符 字符串连接 常用字符串处理函数获取字符串长度查找子字符串查找首次出现的位置查找最后一次出现的位置 替换子字符串简单替换多次替换 分割字符串按分隔符分割 合并字符串转换大小写全…

Telnet不安全?如何配置使用更安全的STelnet远程登录华为AR1000V路由器?

在上一篇文章中&#xff0c;我们介绍了如何配置一台全新的AR1000V&#xff0c;来实现通过Telnet远程登录设备&#xff08;如何配置使用Telnet远程登录华为AR1000V路由器&#xff1f;&#xff09;。其实&#xff0c;在之前的文章中&#xff0c;我们已经介绍过Telnet是一种不安全…

kafka 和 rocketmq 的区别

Kafka 和 RocketMQ 是两种高性能的分布式消息队列系统&#xff0c;广泛用于实时数据处理、事件流处理和分布式系统的解耦。以下是两者的主要区别&#xff1a; 起源和生态 Kafka 起源于 LinkedIn&#xff0c;后贡献给 Apache 社区。拥有强大的开源生态和广泛的社区支持。广泛应…

CV(2)-插值和卷积

前言 仅记录学习过程&#xff0c;有问题欢迎讨论 看看年前可以学到哪。 频率&#xff1a; 灰度值变化程度的指标&#xff0c;是灰度再平面上的梯度幅值: 幅值&#xff1a; 是在一个周期内&#xff0c;交流电瞬时出现的最大绝对值&#xff0c;也是一个正弦波&#xff0c;波…

python数据分析之爬虫基础:解析

目录 1、xpath 1.1、xpath的安装以及lxml的安装 1.2、xpath的基本使用 1.3、xpath基本语法 2、JsonPath 2.1、jsonpath的安装 2.2、jsonpath的使用 2.3、jsonpath的基础语法 3、BeautifulSoup 3.1、bs4安装及创建 3.2、beautifulsoup的使用 3.3、beautifulsoup基本语…

QNX的系统资源访问机制

资料参考: QNX官网文档 在QNX中,一些系统的资源默认是无法访问的,或者可访问的范围过大,导致产生不可控的危险,此时便需要对系统资源进行访问限制 接口如下 #include <sys/rsrcdbmgr.h> #include <sys/rsrcdbmsg.h>int rsrcdbmgr_create(

1000 道最新高频 Java 面试题

金九银十已过&#xff0c;之前面试的也差不多了&#xff0c;小编在这里给大家整理了一套阿里面试官最喜欢问的问题或者出场率较高的面试题&#xff0c;助校招或者社招路上的你一臂之力&#xff01; 首先我们需要明白一个事实&#xff0c;招聘的一个很关键的因素是在给自己找未…

记录vite关于tailwindcss4.0-bate4出现margin[m-*]、padding[p-*]无法生效的问题。

环境如下&#xff1a; vite:5.4.10 tailwindcss: 4.0.0-beta.4 tailwindcss/vite: 4.0.0-beta.4 4.0默认的样式优先级比较低 如果使用了一些reset的css文件 那么很多样式会失效 例如&#xff1a;reset.css中 html, body, ul, li, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, i…

亚马逊云(AWS)使用root用户登录

最近在AWS新开了服务器&#xff08;EC2&#xff09;&#xff0c;用于学习&#xff0c;遇到一个问题就是默认是用ec2-user用户登录&#xff0c;也需要密钥对。 既然是学习用的服务器&#xff0c;还是想直接用root登录&#xff0c;下面开始修改&#xff1a; 操作系统是&#xff1…

《向量数据库指南》——OPPO分布式向量检索的实战与突破

OPPO对向量检索的探索:从单机到分布式的华丽转身 在当今这个数据爆炸的时代,如何高效地存储、检索和分析数据,成为了企业面临的一大挑战。特别是在人工智能领域,向量数据的处理更是占据了举足轻重的地位。OPPO,作为全球知名的智能手机制造商,自然也不会放过这个技术风口…

Matlab 绘制雷达图像完全案例和官方教程(亲测)

首先上官方教程链接 polarplothttps://ww2.mathworks.cn/help/matlab/ref/polarplot.html 上实例 % 定义角度向量和径向向量 theta linspace(0, 2*pi, 5); r1 [1, 2, 1.5, 2.5, 1]; r2 [2, 1, 2.5, 1.5, 2];% 绘制两个雷达图 polarplot(theta, r1, r-, LineWidth, 2); hold …

bash命令缓存导致命令执行失败的问题

1、问题背景 为了修复老版本 vsftpd 的安全漏洞&#xff0c;需要把生产环境上 vsftpd 版本升级到 vsftpd-3.0.5&#xff0c;因为直接使用 rpm 包的方式进行升级还涉及到下层依赖包的升级(生产环境上的依赖包版本不能随意变更&#xff0c;可能会影响其他上层应用)&#xff0c;所…

【Point-LIO】基于Ubuntu20.04的ROS1平台的Point-LIO部署Mid-360激光雷达

0、前言 Mid360参数 1、代码拉取 2、代码编译运行 文件结构 编译流程&#xff1a; 1、先编译livox_ros_driver2 2、编译整个工程文件 3、运行launch文件&#xff08;livox_ros_driver2&#xff09; 成功启动&#xff1a; 3、实物运行 看得出来&#xff0c;在rviz…

mac终端自定义命令打开vscode

1.打开终端配置文件 open -e ~/.bash_profile终端安装了zsh&#xff0c;那么配置文件是.zshrc&#xff08;打开zsh配置&#xff0c;这里举&#x1f330;使用zsh&#xff09; sudo open -e ~/.zshrc 2.在zshrc配置文件中添加新的脚本&#xff08;这里的code就是快捷命令可以进…

SAP导出表结构并保存到Excel 源码程序

SAP导出表结构并保存到Excel,方便写代码时复制粘贴 经常做接口,需要copy表结构,找到了这样一个程程,特别有用。 01. 先看结果

python学习——格式化字符串

在Python中&#xff0c;格式化字符串是一种将变量插入到字符串中的方法&#xff0c;使得字符串的构建更为灵活和方便。以下是一些常见的格式化字符串的方法&#xff1a; 文章目录 1. 使用百分号 % 格式化2. 使用 str.format() 方法3. 使用 f-string (格式化字符串字面量)格式说…

Flink日志配置

所有Flink进程都会创建一个日志文本文件,其中包含进程中发生的各种事件的消息。这些日志可以深入了解Flink的内部工作原理,还可以用来检测问题(以警告/错误信息的形式),并帮助调试。 可以通过web界面的JobManager/TaskManager页面访问日志文件。使用的资源提供者(例如YA…

LLM学习笔记(15)LangChain、LlamaIndex、LlamaIndex

Transformer 和 PyTorch 是什么关系&#xff1f; Transformer和PyTorch可以很好地配合使用&#xff0c;但它们并不是同一层面的工具。具体来说&#xff1a; Transformer是一个神经网络的架构&#xff0c;最初用于自然语言处理&#xff0c;但也可以扩展到其他任务&#xff08;…

记录一下,解决js内存溢出npm ERR! code ELIFECYCLEnpm ERR! errno 134 以及 errno 9009

项目是个老项目&#xff0c;依赖包也比较大&#xff0c;咱就按正常流程走一遍来详细解决这个问题&#xff0c;先看一下node版本&#xff0c;我用的是nvm管理的&#xff0c;详细可以看我的其他文章 友情提醒&#xff1a;如果项目比较老&#xff0c;包又大&#xff0c;又有一些需…

【Linux】gdb / cgdb 调试 + 进度条

&#x1f33b;个人主页&#xff1a;路飞雪吖~ &#x1f320;专栏&#xff1a;Linux 目录 一、Linux调试器-gdb &#x1f31f;开始使用 &#x1f320;小贴士&#xff1a; &#x1f31f;gdb指令 &#x1f320;小贴士&#xff1a; ✨watch 监视 ✨打条件断点 二、小程序----进…