webpack中的hash、chunkhash、contenthash區別

  hash通常是結合CDN緩存來使用,經過webpack構建以後,生成對應文件名自動帶上對應的MD5值。若是文件內容改變的話,那麼對應文件哈希值也會改變,對應的HTML引用的URL地址也會改變,觸發CDN服務器從源服務器上拉取對應數據,進而更新本地緩存。可是在實際使用的時候,這幾種hash計算仍是有必定區別。css

一、hash
webpack

  hash是跟整個項目的構建相關,只要項目裏有文件更改,整個項目構建的hash值都會更改,而且所有文件都共用相同的hash值web

二、chunkhash
緩存

  採用hash計算的話,每一次構建後生成的哈希值都不同,即便文件內容壓根沒有改變。這樣子是沒辦法實現緩存效果,咱們須要換另外一種哈希值計算方式,即chunkhash。
服務器

  chunkhash和hash不同,它根據不一樣的入口文件(Entry)進行依賴文件解析、構建對應的chunk,生成對應的哈希值。咱們在生產環境裏把一些公共庫和程序入口文件區分開,單獨打包構建,接着咱們採用chunkhash的方式生成哈希值,那麼只要咱們不改動公共庫的代碼,就能夠保證其哈希值不會受影響。spa

三、contenthash
hash

  在使用chunkhash的例子中,若是index.css被index.js引用了,那麼就會共用相同的chunkhash值。可是這樣子有個問題,若是index.js更改了代碼,css文件就算內容沒有任何改變,因爲是該模塊發生了改變,致使css文件會重複構建。
  這個時候,咱們可使用extra-text-webpack-plugin裏的contenthash值,保證即便css文件所處的模塊裏就算其餘文件內容改變,只要css文件內容不變,那麼不會重複構建。打包

相關文章
相關標籤/搜索