一、使用js驗(yàn)證hash, content hash , chunk hash的區(qū)別

1、計(jì)算一般的 Hash（以簡(jiǎn)單字符串為例）

使用crypto-js庫(kù)來(lái)進(jìn)行哈希計(jì)算，需提前引入npm install crypto-js庫(kù)。

crypto-js： 是一個(gè)JavaScript加密算法庫(kù)，用于實(shí)現(xiàn)各種加密算法和哈希函數(shù)，它提供了一種簡(jiǎn)單而強(qiáng)大的方式來(lái)執(zhí)行加密操作，包括對(duì)稱加密算法、非對(duì)稱加密算法和哈希函數(shù)等。

• 實(shí)現(xiàn)：這里以一個(gè)簡(jiǎn)單字符串來(lái)驗(yàn)證，使用CryptoJS.SHA256進(jìn)行加密， 字符串改變，生成的加密值肯定不同。
• 應(yīng)用：一般開(kāi)發(fā)登錄模塊的時(shí)候會(huì)用到，服務(wù)端存儲(chǔ)的是這個(gè)哈希值，當(dāng)再次登錄輸入密碼時(shí)，會(huì)再次計(jì)算密碼的哈希值，并和存儲(chǔ)的哈希值做比較。

const CryptoJS = require("crypto-js");
// Hash
const password = "this is my passward 1234";
const hash = CryptoJS.SHA256(password).toString();
console.log("Hash：", hash);

2、計(jì)算 Content Hash（基于文本內(nèi)容整體的哈希）

首先準(zhǔn)備一個(gè)txt文件，然后通過(guò)fs讀取文件內(nèi)容。
text.txt:

這是一段測(cè)試的文本?。?！
11111111111111111
222222222
3333333333
44444444

fs模塊： Node.js提供的對(duì)系統(tǒng)文件及目錄進(jìn)行讀寫(xiě)操作的模塊。
fs.readFile(filename,[option],callback) 方法讀取文件。

• 實(shí)現(xiàn)：加密方法還是和上面的一樣，只不過(guò)是通過(guò)fs獲取的文件內(nèi)容?？梢钥吹剑瑑?nèi)容哈希關(guān)注的是文件內(nèi)容本身的完整性。如果文件內(nèi)容發(fā)生變化，內(nèi)容哈希值也會(huì)隨之改變。
• 場(chǎng)景：在內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）中判斷資源是否更新等場(chǎng)景，只要內(nèi)容沒(méi)變化，內(nèi)容哈希值就不會(huì)變。

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、計(jì)算 Chunk Hash（將內(nèi)容分塊后計(jì)算哈希）

和上面內(nèi)容哈希的獲取方式一樣，只不過(guò)需要將獲取到的文件劃分成多個(gè)chunk，然后對(duì)每個(gè)chunk進(jìn)行加密。

const CryptoJS = require("crypto-js");
const fs = require("fs");
// Chunk Hash
const CHUNK_SIZE = 10; // 每個(gè)塊的大?。ㄗ止?jié)）
fs.readFile("src/test.txt", "utf-8", (err, data) => {
    if (err) {
        console.log("err", err);
        return;
    }
    const chunkHashes = []; // 塊hash值數(shù)組
    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 中用于提取字符串或數(shù)組部分內(nèi)容的方法。它返回一個(gè)新的字符串或數(shù)組，包含從原字符串或數(shù)組中提取的部分元素，原字符串或數(shù)組本身不會(huì)被修改。

語(yǔ)法：string.slice(startIndex[, endIndex])。其中startIndex是提取的起始位置（索引從 0 開(kāi)始），endIndex是提取的結(jié)束位置（不包括該位置的字符）。如果省略endIndex，則提取從startIndex到字符串末尾的部分。

改變txt文件中的后面一點(diǎn)內(nèi)容，然后觀察到前面的chunk的hash都沒(méi)變，只有后面的兩個(gè)hash改變了。

場(chǎng)景：這種塊哈希的計(jì)算方式常用于大型文件傳輸?shù)葓?chǎng)景，在傳輸或存儲(chǔ)過(guò)程中可以分別驗(yàn)證每個(gè)塊的完整性，通過(guò)對(duì)比每個(gè)塊的哈希值與原始的塊哈希是否一致來(lái)判斷塊數(shù)據(jù)是否準(zhǔn)確。

二、webpack配置中這三種hash的作用分析

1、Hash（模塊標(biāo)識(shí)符哈希）

在webpack中，hash是基于整個(gè)構(gòu)建內(nèi)容（包括所有模塊、資源等）生成的一個(gè)哈希值，每次構(gòu)建時(shí)，只要一個(gè)文件改變，這個(gè)哈希值就會(huì)改變。

module.exports = { 
    //...其他配置 
    output: { filename: '[name].[hash:8].js' }  //:8就是指定生成的hash值是8位的
};

• 優(yōu)點(diǎn)： 簡(jiǎn)單直接，可以用于版本控制和緩存清除。當(dāng)新的構(gòu)建發(fā)生時(shí)，由于hash值改變，瀏覽器會(huì)重新下載新的資源文件，保證用戶獲取到最新的內(nèi)容。
• 缺點(diǎn)： 比如即使一個(gè)css文件一個(gè)小改動(dòng)，重新構(gòu)建時(shí)哈希值都會(huì)改變，可能導(dǎo)致不必要的緩存失效，影響性能。

2、Content Hash（內(nèi)容哈希）

在webpack中，content-hash是根據(jù)文件內(nèi)容（具體模塊或資源的內(nèi)容）生成的哈希值。它只和文件自身的內(nèi)容有關(guān)，與其他文件或構(gòu)建過(guò)程中的其他因素?zé)o關(guān)。

module.exports = { 
    //...其他配置 
    output: { filename: '[name].[contenthash].js' } 
};

優(yōu)點(diǎn)： 精確地基于內(nèi)容進(jìn)行哈希計(jì)算，使得只有內(nèi)容發(fā)生變化的文件，其文件名才會(huì)改變。這對(duì)于緩存管理非常有利。缺點(diǎn)： 計(jì)算成本相對(duì)較高，因?yàn)樾枰獙?duì)每個(gè)文件內(nèi)容進(jìn)行單獨(dú)的哈希計(jì)算。不過(guò)，在現(xiàn)代構(gòu)建工具和硬件條件下，這個(gè)缺點(diǎn)通?？梢越邮?。

3、Chunk Hash（塊哈希）

在webpack中，chunk-hash是基于 Webpack 打包后的代碼塊（chunk）生成的哈希值。Webpack 在打包過(guò)程中會(huì)將相關(guān)的模塊組合成代碼塊，chunk-hash就是針對(duì)這些代碼塊進(jìn)行計(jì)算的。

module.exports = { 
    //...其他配置 
    output: { filename: '[name].[chunkhash].js' } 
};

• 優(yōu)點(diǎn)： 可用于代碼分割（code-splitting）場(chǎng)景。如：一個(gè) Web 應(yīng)用有多個(gè)入口點(diǎn)（如main.js和vendor.js），通過(guò)chunk-hash可以為每個(gè)入口點(diǎn)對(duì)應(yīng)的代碼塊生成獨(dú)立的哈希值。這樣，當(dāng)一個(gè)代碼塊（如vendor.js包含第三方庫(kù)）的內(nèi)容沒(méi)有變化時(shí)，其對(duì)應(yīng)的文件名不會(huì)因?yàn)槠渌a塊（如main.js）的變化而改變，有利于瀏覽器緩存的有效利用。
• 缺點(diǎn)： 如果代碼塊的劃分發(fā)生變化（例如，調(diào)整了 Webpack 的代碼分割策略），即使模塊內(nèi)容沒(méi)有改變，chunk-hash值也可能會(huì)改變，從而影響緩存。

這篇文章我們通過(guò)js驗(yàn)證了一下hash, content hash , chunk hash的區(qū)別，并對(duì)比了一下webpack中的使用場(chǎng)景，希望對(duì)對(duì)webpack這里配置有疑惑的伙伴有幫助。

到此這篇關(guān)于使用js驗(yàn)證hash, content hash , chunk hash的區(qū)別的文章就介紹到這了,更多相關(guān)js驗(yàn)證hash, content hash , chunk hash內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！