hash一般是結合CDN緩存來使用,通過webpack構建之后,生成對應文件名自動帶上對應的MD5值。如果文件內容發生改變的話,那么對應文件hash值也會改變,對應的HTML引用的URL地址也會改變,觸發CDN服務器從原服務器上拉取對應數據,進而更新本地緩存。
hash
hash是跟整個項目的構建相關,構建生成的文件hash值都是一樣的,所以hash計算是跟整個項目的構建相關,同一次構建過程中生成的hash都是一樣的,只要項目里有文件更改,整個項目構建的hash值都會更改。
如果出口是hash,那么一旦針對項目中任何一個文件的修改,都會構建整個項目,重新獲取hash值,緩存的目的將失效。
chunkhash
采用hash計算的話,每一次構建后生成的hash值都不一樣,即使文件內容壓根沒有改變。這樣子是沒辦法實現緩存效果,我們需要另一種hash值計算方法,即chunkhash。
chunkhash和hash不一樣,它根據不同的入口文件(Entry)進行依賴文件解析、構建對應的chunk,生成對應的hash值。我們在生產環境里把一些公共庫和程序入口文件區分開,單獨打包構建,接着我們采用chunkhash的方式生成hash值,那么只要我們不改動公共庫的代碼,就可以保證其hash值不會受影響。
由於采用chunkhash,所以項目主入口文件main.js及其對應的依賴文件main.css由於被打包在同一個模塊,所以共用相同的chunkhash,但是公共庫由於是不同的模塊,所以有單獨的chunkhash。這樣子就保證了在線上構建時只要文件內容沒有更改就不會重復構建
配置如下
output: { filename: '[name].[chunkhash].js', chunkFilename: '[name].[chunkhash].js', publicPath: publishPath.publishPath + publishPath.prefix +'/' },
如果單獨抽出css 文件的需要加上
new extractTextPlugin({ filename: 'style/[name][chunkhash].css' }),
插件中添加
new webpack.HashedModuleIdsPlugin(), new WebpackChunkHash(),