鍍金池/ 問(wèn)答/HTML/ CommonsChunkPlugin 配置minChunks: Infinity

CommonsChunkPlugin 配置minChunks: Infinity, 官方給的這段解釋如何理解?

傳入 Infinity 會(huì)馬上生成 公共chunk，但里面沒(méi)有模塊。

clipboard.png

vue-cli 中抽離manifest chunk解決vendor長(zhǎng)期緩存問(wèn)題，但minChunks: Infinity的具體作用是什么？

new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  minChunks: Infinity
}),
回答
編輯回答
放開(kāi)她

首先我們要明白CommonsChunk是干什么用的，Common是通用、共用的意思，Chunk是大塊的意思，那么整個(gè)這個(gè)插件的作用就是把我們代碼中用到的零散的js文件合并成一個(gè)一個(gè)的大塊供系統(tǒng)調(diào)用，這樣可以有效地減少http請(qǐng)求次數(shù)。

那么把哪些js合并在一個(gè)大塊里，依據(jù)什么原則呢？就由這個(gè)minChunks來(lái)決定，min是minimum的縮寫，意思就是最少大塊數(shù)，它需要是比1大的整數(shù)，同時(shí)還要求小于等于大塊總數(shù)，這里如果你設(shè)置為2，那就是說(shuō)如果有2個(gè)以上的大塊都用到了某一個(gè)js文件，那么我們就把它抽取出來(lái)放到這個(gè)公共大塊里，這樣就不會(huì)造成重復(fù)浪費(fèi)。

而infinity是無(wú)限的意思，這就是說(shuō)必須有無(wú)限多個(gè)大塊都用到了這個(gè)js文件，我們才把它抽取出來(lái)放到這個(gè)公共大塊里，很顯然，不可能用任何js文件滿足這個(gè)條件被無(wú)限多個(gè)大塊使用，所以這里生成的其實(shí)就是一個(gè)空的大塊，它只有一個(gè)文件名，而文件長(zhǎng)度是0，這就是minChunks: Infinity的作用。

2018年6月4日 07:25