webpack 設置有幾種hash哈希值?有哪些作用??


三種設置的區別

1、Hash

hash是跟整個項目的構建相關,只要項目里有文件更改,整個項目構建的hash值都會更改,並且全部文件都共用相同的hash值

2、chunkhash

chunkhash,它根據不同的入口文件(Entry)進行依賴文件解析、構建對應的chunk,生成對應的哈希值。

簡單來說這種是根據不同入口來配置的,比如react,react-router、resux等公共入口文件,只要這些沒有改變,那么他對應生成的js的hash值也不會改變。

3、contenthash

contenthash主要是處理關聯性,比如一個js文件中引入css,但是會生成一個js文件,一個css文件,

但是因為入口是一個,導致他們的hash值也相同,所以當只有js修改時,關聯輸出的css、img等文件的hash值也會改變,這種情況下就需要contenthash了。

 

使用哈希值的作用:

1、提升webpack打包速度和項目體積

將webpack入口的chunk文件中所有公共的代碼提取出來,減少代碼體積;同時提升webpack打包速度。

2、利用緩存機制

依賴的公共模塊文件一般很少更改或者不會更改,這樣獨立模塊文件提取出可以長期緩存。

3、利用瀏覽器緩存

方便我們在改動代碼的時候,線上代碼發版后及時讀取最新的js文件,防止出現緩存問題;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM