首頁 > 文章 > web前端 > webpack中的hash、chunkhash、contenthash區別分享

webpack中的hash、chunkhash、contenthash區別分享

小云云原創: 2018-01-08 09:45:302014瀏覽

本文主要介紹了詳解webpack中的hash、chunkhash、contenthash區別，詳細的介紹了hash、chunkhash、contenthash的用法和區別，有興趣的可以了解一下，希望能幫助到大家。

hash、chunkhash、contenthash

hash一般是結合CDN快取來使用，透過webpack建置之後，產生對應檔案名稱自動帶上對應的MD5值。如果檔案內容改變的話，那麼對應檔案雜湊值也會改變，對應的HTML引用的URL位址也會改變，觸發CDN伺服器從來源伺服器上拉取對應數據，進而更新本地快取。但是在實際使用的時候，這幾種hash計算還是有一定差別。
我們先建立一個測試案例來模擬下：

專案結構

我們的專案結構很簡單，入口檔案index.js，引用了index.css。然後新建了jquery.js和test.js作為公共函式庫。

//index.js

 require('./index.css')
 module.exports = function(){
  console.log(`I'm jack`)
  var a = 12
 }

//index.css

 .selected : {
   display: flex;
   transition: all .6s;
   user-select: none;
   background: linear-gradient(to bottom, white, black);
 }

接著我們修改webpack.config.js來模擬不同hash計算

hash

hash是跟整個專案的建置相關，只要專案裡有檔案更改，整個專案建構的hash值都會更改，並且全部檔案都共用相同的hash值

 var extractTextPlugin = require('extract-text-webpack-plugin'),
  path = require('path')
 
 module.exports = {
  context : path.join(__dirname,'src'),
  entry:{
  main: './index.js',
  vender:['./jquery.js','./test.js']
  },
  module:{
  rules:[{
   test:/\.css$/,
   use: extractTextPlugin.extract({
   fallback:'style-loader',
   use:'css-loader'
   })
  }]
  },
  output:{
  path:path.join(__dirname, '/dist/js'),
  filename: 'bundle.[name].[hash].js',
  },
  plugins:[
  new extractTextPlugin('../css/bundle.[name].[hash].css')
  ]
 }

根據上面的配置，我們執行webpack指令之後，可以得到下面的結果

採用hash計算的執行結果1：

#執行結果2:

我們可以看到建構產生的檔案hash值都是一樣的，所以hash計算是跟整個專案的建構相關，同一次建置過程中產生的雜湊都是一樣的

chunkhash

採用hash計算的話，每次建構後產生的雜湊值都不一樣，即使檔案內容壓根沒有改變。這樣子是沒辦法實現快取效果，我們需要換另一種哈希值計算方式，也就是chunkhash。

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

 var extractTextPlugin = require('extract-text-webpack-plugin'),
  path = require('path')
 
 module.exports = {
  ...
  ...
  output:{
  path:path.join(__dirname, '/dist/js'),
  filename: 'bundle.[name].[chunkhash].js',
  },
  plugins:[
  new extractTextPlugin('../css/bundle.[name].[chunkhash].css')
  ]
 }

採用chunkhash計算的執行結果1：

#執行結果2:

我們可以看到，由於採用chunkhash，所以專案主入口檔案Index.js及其對應的依賴檔Index.css由於被打包在同一個模組，所以共用相同的chunkhash，但是公共函式庫由於是不同的模組，所以有單獨的chunkhash。這樣子就保證了在線上建構的時候只要檔案內容沒有更改就不會重複建構

contenthash

在chunkhash的例子，我們可以看到由於index.css被index.js引用了，所以共用相同的chunkhash值。但是這樣子有個問題，如果index.js更改了程式碼，css檔案就算內容沒有任何改變，由於是該模組發生了改變，導致css檔案會重複建置。
這個時候，我們可以使用extra-text-webpack-plugin裡的contenthash值，保證即使css檔案所處的模組裡就算其他檔案內容改變，只要css檔案內容不變，那麼不會重複建置。

 var extractTextPlugin = require('extract-text-webpack-plugin'),
  path = require('path')
 
 module.exports = {
  ...
  ...
  output:{
  path:path.join(__dirname, '/dist/js'),
  filename: 'bundle.[name].[chunkhash].js',
  },
  plugins:[
  new extractTextPlugin('../css/bundle.[name].[contenthash].css')
  ]
 }

採用contenthash計算的執行結果1：

執行結果2:

webpack中的hash、chunkhash、contenthash區別分享

相關文章