webpack:hash、chunkhash、contenthash三者區(qū)別

一、hash(所有文件哈希值相同,只要改變內(nèi)容跟之前的不一致,所有哈希值都改變,沒(méi)有做到緩存意義)

hash是跟整個(gè)項(xiàng)目的構(gòu)建相關(guān),構(gòu)建生成的文件hash值都是一樣的,所以hash計(jì)算是跟整個(gè)項(xiàng)目的構(gòu)建相關(guān),同一次構(gòu)建過(guò)程中生成的hash都是一樣的,只要項(xiàng)目里有文件更改,整個(gè)項(xiàng)目構(gòu)建的hash值都會(huì)更改。

如果出口是hash,那么一旦針對(duì)項(xiàng)目中任何一個(gè)文件的修改,都會(huì)構(gòu)建整個(gè)項(xiàng)目,重新獲取hash值,緩存的目的將失效。

二、chunkhash(同一個(gè)模塊,就算將js和css分離,其哈希值也是相同的,修改一處,js和css哈希值都會(huì)變,同hash,沒(méi)有做到緩存意義)

它根據(jù)不同的入口文件(Entry)進(jìn)行依賴文件解析、構(gòu)建對(duì)應(yīng)的chunk,生成對(duì)應(yīng)的hash值。我們?cè)谏a(chǎn)環(huán)境里把一些公共庫(kù)和程序入口文件區(qū)分開(kāi),單獨(dú)打包構(gòu)建,接著我們采用chunkhash的方式生成hash值,那么只要我們不改動(dòng)公共庫(kù)的代碼,就可以保證其hash值不會(huì)受影響。

由于采用chunkhash,所以項(xiàng)目主入口文件main.js及其對(duì)應(yīng)的依賴文件main.css由于被打包在同一個(gè)模塊,所以共用相同的chunkhash。
這樣就會(huì)有個(gè)問(wèn)題,只要對(duì)應(yīng)css或則js改變,與其關(guān)聯(lián)的文件hash值也會(huì)改變,但其內(nèi)容并沒(méi)有改變,所以沒(méi)有達(dá)到緩存意義。

三、contenthash(只要文件內(nèi)容不一樣,產(chǎn)生的哈希值就不一樣)

contenthash表示由文件內(nèi)容產(chǎn)生的hash值,內(nèi)容不同產(chǎn)生的contenthash值也不一樣。在項(xiàng)目中,通常做法是把項(xiàng)目中css都抽離出對(duì)應(yīng)的css文件來(lái)加以引用。

所以css文件最好使用contenthash。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容