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

1、計算一般的 Hash（以簡單字符串為例）

使用crypto-js庫來進行哈希計算，需提前引入npm install crypto-js庫。

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

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

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（基于文本內(nèi)容整體的哈希）

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

這是一段測試的文本?。。?br />11111111111111111
222222222
3333333333
44444444

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

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

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

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

const CryptoJS = require("crypto-js");
const fs = require("fs");
// Chunk Hash
const CHUNK_SIZE = 10; // 每個塊的大?。ㄗ止?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)容的方法。它返回一個新的字符串或數(shù)組，包含從原字符串或數(shù)組中提取的部分元素，原字符串或數(shù)組本身不會被修改。

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

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

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

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

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

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

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

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

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

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

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

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

3、Chunk Hash（塊哈希）

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

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

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

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

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

最新評論