CommonsChunkPlugin
這CommonsChunkPlugin是一個選入功能线梗，它創(chuàng)建一個單獨的文件（稱為塊）霹疫，由多個入口點之間共享的通用模塊組成。通過將通用模塊從bundle中分離出來，所產(chǎn)生的分塊文件最初可以被加載一次压汪，并存儲在緩存中供以后使用。這會導(dǎo)致pagespeed優(yōu)化古瓤，因為瀏覽器可以快速提供緩存中的共享代碼止剖，而不必在訪問新頁面時強制加載更大的包。
使用 CommonsChunkPlugin 為每個頁面間的應(yīng)用程序共享代碼創(chuàng)建 bundle落君。由于入口起點增多穿香，多頁應(yīng)用能夠復(fù)用入口起點之間的大量代碼/模塊，從而可以極大地從這些技術(shù)中受益绎速。
多頁面程序開發(fā)中皮获，存在不同頁面JS引入了相同的庫和模塊，這時候?qū)⒐驳膸斐槌梢粋€JS文件纹冤，每個頁面都可能會引入這份公共的JS文件洒宝，這份JS文件只要沒有更新，就只用下載一次萌京。生成的時候使用hash做標志雁歌，進行緩存。
image.png
在只更新了main的情況下知残，index頁面獲取資源文件情況如圖靠瞎，indexJS和CommonJS都是獲取的緩存。
CommonsChunkPlugin這個插件是用來提取公共代碼的，通過將公共模塊提取出來较坛，只在頁面加載的時候引入一次印蔗，其他頁面可以利用前一個頁面緩存下來的類庫，提升應(yīng)用的加載效率丑勤。
對于你自己的app來說华嘹，可能也會出現(xiàn)共享的自己寫的公共模塊假設(shè)叫Common，所以你也需要提取這個common法竞。這個時候需要用到CommonsChunkPlugin耙厚，官方的文檔說的很清楚了，這個CommonsChunkPlugin 可以通過傳參minChunks來控制你希望重復(fù)出現(xiàn)幾次的module 被提取出來打包岔霸。也就是說你自己可以控制當(dāng)一個模塊被引入幾次可以被打包到共用的chunk中薛躬，還可以規(guī)定如果這個公共模塊小于一個值 minSize，就不被提取出來這些都可以幫助你控制你想要的粒度呆细。當(dāng)你改的不是公共模塊的代碼型宝，理論上webpack 打包的時候本來就不會影響其他代碼。
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors', // 將公共模塊提取絮爷，生成名為`vendors`的chunk
chunks: ['index','list','about'], //提取哪些模塊共有的部分
minChunks: 3 // 提取至少3個模塊共有的部分
}),
webpack打包生成多個vendor
因為有時候不想把所有庫都打包到一起趴酣，勢必要分開打包，例如把jQuery和react分開打包成兩個vendor
CommonsChunkPlugin里面坑夯，vender的順序要和加載順序相反岖寞。
其它提取vendor的配置，官方已經(jīng)給出了demo：
Common and Vendor Chunks
Multiple Common Chunks
Multiple Entry Points with Commons Chunk
entry:{
index:path.resolve(__dirname,"../app/js/index.js"),
main:path.resolve(__dirname,"../app/js/main.js"),
vendor_1:["jquery"],
vendor_2:[path.resolve(__dirname,"../app/lib/common.js")]
},
plugins:[
new webpack.optimize.CommonsChunkPlugin({
name: ["vendor_2","vendor_1"],
minChunks: Infinity,
})
]
想避免重復(fù)打包第三方庫
//為了避免vendor.*.js的hash值發(fā)生改變需要輸出一個manifest.*.js文件
new webpack.optimize.CommonsChunkPlugin({
name: ‘manifest‘ //But since there are no more common modules between them we end up with just the runtime code
included in the manifest file
})
