一、使用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進行加密， 字符串改變，生成的加密值肯定不同。
• 應用：一般開發(fā)登錄模塊的時候會用到，服務端存儲的是這個哈希值，當再次登錄輸入密碼時，會再次計算密碼的哈希值，并和存儲的哈希值做比較。

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提供的對系統(tǒng)文件及目錄進行讀寫操作的模塊。
fs.readFile(filename,[option],callback) 方法讀取文件。

• 實現(xiàn)：加密方法還是和上面的一樣，只不過是通過fs獲取的文件內容?？梢钥吹?，內容哈希關注的是文件內容本身的完整性。如果文件內容發(fā)生變化，內容哈希值也會隨之改變。
• 場景：在內容分發(fā)網(wǎng)絡（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; // 每個塊的大?。ㄗ止?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ù)組部分內容的方法。它返回一個新的字符串或數(shù)組，包含從原字符串或數(shù)組中提取的部分元素，原字符串或數(shù)組本身不會被修改。

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

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

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

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

1、Hash（模塊標識符哈希）

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

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

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

2、Content Hash（內容哈希）

在webpack中，content-hash是根據(jù)文件內容（具體模塊或資源的內容）生成的哈希值。它只和文件自身的內容有關，與其他文件或構建過程中的其他因素無關。

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

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

3、Chunk Hash（塊哈希）

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

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

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

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

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

最新評論