秒懂:使用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,一经查实,立即删除!

相关文章

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

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

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基本语…

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…

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 (格式化字符串字面量)格式说…

记录一下,解决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 监视 ✨打条件断点 二、小程序----进…

【人工智能】大数据平台技术及应用

文章目录 前言一、大数据平台基本概念及发展趋势1、数据量爆发式增长&#xff0c;发数据蓬勃发展2、大数据到底是什么&#xff1f;3、大数据处理与传统数据处理的差异4、为什么要建立大数据平台&#xff1f;5、大数据平台开源架构-Hadoop6、华为云大数据平台架构 二、大数据技术…

ABAP - 系统集成之SAP的数据同步到OA(泛微E9)服务器数据库

需求背景 项目经理说每次OA下单都需要调用一次SAP的接口获取数据&#xff0c;导致效率太慢了&#xff0c;能否把SAP的数据保存到OA的数据库表里&#xff0c;这样OA可以直接从数据库表里获取数据效率快很多。思来想去&#xff0c;提供了两个方案。 在集群SAP节点下增加一个SQL S…

PHP语法学习(第三天)

老规矩&#xff0c;先回顾一下昨天学习的内容 PHP语法学习(第二天) 主要学习了PHP变量、变量的作用域、以及参数作用域。 今天由Tom来打开新的篇章 文章目录 echo 和 print 区别PHP echo 语句实例 PHP print 语句实例 PHP 数组创建数组利用array() 函数 数组的类型索引数组关联…

vue3+ts+vite+ElementPlus上传进度条实时更新(UPLoad和progress)。

需求&#xff1a; 上传文件时&#xff0c;展示进度条实时更新&#xff1a; 下面是代码片段: <!-- 添加媒体弹窗 -- 上传 --><el-dialog v-model"centerDialogVisible" title"媒体信息" width"700" :close-on-click-modal"false&qu…

MSSQL2022的一个错误:未在本地计算机上注册“Microsoft.ACE.OLEDB.16.0”提供程序

MSSQL2022导入Excel的一个错误&#xff1a;未在本地计算机上注册“Microsoft.ACE.OLEDB.16.0”提供程序 一、导入情况二、问题发现三、问题解决 最近在安装新版SQLServer SSMS 2022后&#xff0c;每次导入Excel都会出现错误提示&#xff1a;未在本地计算机上注册“Microsoft.AC…

优傲协作机器人 Remote TCP Toolpath URCap(操作记录)

目录 一、新机设置项 1、设置管理员密码 2、设置安全密码 3、设置负载 二、激活 Remote TCP & Toolpath URCap 1、插入U盘 2、打开激活面板 3、导入许可证 4、查看是否激活成功 5、启用功能 三、使用流程&#xff08;官方&#xff09; 步骤一 步骤二 步骤三 …