hash、chunkhash、contenthash

hash一般是結(jié)合CDN緩存來(lái)使用，通過(guò)webpack構(gòu)建之后，生成對(duì)應(yīng)文件名自動(dòng)帶上對(duì)應(yīng)的MD5值。如果文件內(nèi)容改變的話(huà)，那么對(duì)應(yīng)文件哈希值也會(huì)改變，對(duì)應(yīng)的HTML引用的URL地址也會(huì)改變，觸發(fā)CDN服務(wù)器從源服務(wù)器上拉取對(duì)應(yīng)數(shù)據(jù)，進(jìn)而更新本地緩存。但是在實(shí)際使用的時(shí)候，這幾種hash計(jì)算還是有一定區(qū)別。
我們先建一個(gè)測(cè)試案例來(lái)模擬下：

項(xiàng)目結(jié)構(gòu)

我們的項(xiàng)目結(jié)構(gòu)很簡(jiǎn)單，入口文件index.js，引用了index.css。然后新建了jquery.js和test.js作為公共庫(kù)。

//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來(lái)模擬不同hash計(jì)算

hash

hash是跟整個(gè)項(xiàng)目的構(gòu)建相關(guān)，只要項(xiàng)目里有文件更改，整個(gè)項(xiàng)目構(gòu)建的hash值都會(huì)更改，并且全部文件都共用相同的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')
  ]
 }

根據(jù)上面的配置，我們執(zhí)行webpack命令之后，可以得到下面的結(jié)果

采用hash計(jì)算的執(zhí)行結(jié)果1：

執(zhí)行結(jié)果2:

我們可以看到構(gòu)建生成的文件hash值都是一樣的，所以hash計(jì)算是跟整個(gè)項(xiàng)目的構(gòu)建相關(guān)，同一次構(gòu)建過(guò)程中生成的哈希都是一樣的

chunkhash

采用hash計(jì)算的話(huà)，每一次構(gòu)建后生成的哈希值都不一樣，即使文件內(nèi)容壓根沒(méi)有改變。這樣子是沒(méi)辦法實(shí)現(xiàn)緩存效果，我們需要換另一種哈希值計(jì)算方式，即chunkhash。

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

 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計(jì)算的執(zhí)行結(jié)果1：

執(zhí)行結(jié)果2:

我們可以看到，由于采用chunkhash，所以項(xiàng)目主入口文件Index.js及其對(duì)應(yīng)的依賴(lài)文件Index.css由于被打包在同一個(gè)模塊，所以共用相同的chunkhash，但是公共庫(kù)由于是不同的模塊，所以有單獨(dú)的chunkhash。這樣子就保證了在線(xiàn)上構(gòu)建的時(shí)候只要文件內(nèi)容沒(méi)有更改就不會(huì)重復(fù)構(gòu)建

contenthash

在chunkhash的例子，我們可以看到由于index.css被index.js引用了，所以共用相同的chunkhash值。但是這樣子有個(gè)問(wèn)題，如果index.js更改了代碼，css文件就算內(nèi)容沒(méi)有任何改變，由于是該模塊發(fā)生了改變，導(dǎo)致css文件會(huì)重復(fù)構(gòu)建。
這個(gè)時(shí)候，我們可以使用extra-text-webpack-plugin里的contenthash值，保證即使css文件所處的模塊里就算其他文件內(nèi)容改變，只要css文件內(nèi)容不變，那么不會(huì)重復(fù)構(gòu)建。

 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計(jì)算的執(zhí)行結(jié)果1：

執(zhí)行結(jié)果2:

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論