基礎
commons-chunk-plugin
split-chunks-plugin
即webpack的分包插件。CommonsChunkPlugin于4.0及以后被移除空盼，使用SplitChunksPlugin替代纫事。
chunk：塊册着，指若干個js module的集合
bundle：形式上是塊的集合，意義是代表一個可以運行的整體
chunk和bundle：what-are-module-chunk-and-bundle-in-webpack
比較難說明判莉，搜的基本都是個人總結(jié)，官方描述也比較抽象育谬。
就我個人總結(jié)來說券盅，一個模塊化的js文件就是一個模塊，若干個js模塊會打包成一個總的js文件膛檀，這個js文件稱作bundle锰镀。但如果是多頁面應用，往往會安排為一個html對應一個bundle宿刮，那么兩個html的bundle之間重復的模塊就是重復代碼互站。此時我們會把這兩個bundle重復的模塊抽出來，稱為common chunk僵缺，余下的兩部分直接稱作兩個chunk。即此時一共有3個chunk踩叭，但依然只有兩個bundle磕潮。
單頁面應用中異步加載，或者單純想分離出不變的第三方庫容贝，均可采用該手段進行優(yōu)化自脯。
入口chunk：entry里面的指定的入口，他們對應一個chunk并且key值就是chunk name
CommonsChunkPlugin
最基本使用
CommonsChunkPlugin基本選項:
name：選擇一個chunk斤富。該chunk存在則選中膏潮，不存在則新建。代表把下面的chunks他們的重復模塊合并到這個chunk
chunks：chunk來源满力，不設置代表選擇全部入口chunk
minChunks：被多少次重復引用時才抽出來焕参。數(shù)量必須大于等于2，或者少于等于chunks的數(shù)量
請對照著官方示例直接上：
圖解1：入口有6個油额，當然有6個chunk了叠纷。每個chunk都是js模塊的集合，如pageA這個chunk就有4個模塊
{a-b,a-c,a-b-c,pageA}潦嘶，圖里省略了一些路徑和入口文件的那個模塊(如pageA.js也在pageA這個chunk里涩嚣，但省略了)，這樣分析比較清楚掂僵。
圖解2：第一個
new CommonsChunkPlugin那個執(zhí)行完成后航厚，如圖所示。有7個chunk锰蓬，其中a-b-c.js和admin.js被抽出放到admin-commons中
圖解3：minChunks為2幔睬，即重復引用兩次即可抽出，顯然a-b重復兩次互妓、a-b-c重復3次溪窒，均被抽出
圖解4：a-b-c抽出
最終盗誊，9個chunk收叶，生成9個js文件。
至于“父子關系”，看圖即可驮吱。假如我們要引入adminPageA.js，就要先引入admin-commons.js逊拍，因為他有部分代碼在admin-commons.js爱咬；同理要引入admin-commons.js就要先引入commons.js，最終在html的導入寫法如官方例子所示份汗。
進階使用
1.minChunks: Infinity有何用盈电？無窮次重復引用才抽出？
明確第三方庫 chunk杯活。注意name的說明有說是存在則選擇匆帚，chunks的說明有說不寫則默認選中全部入口chunk，這說明可能會把入口chunk之間重復的模塊抽到vendor(早已存在旁钧，包含"jquery", "other-lib"模塊)吸重。這里只是一個保證，自己能弄明白的時候這個可以換種寫法或者直接整個省略不寫歪今。
2.children嚎幸、async
弄懂這兩個就算大成了，剩下的minSize寄猩、deepChildren自己猜都能猜到嫉晶。
這里右轉(zhuǎn)：webpack中ensure方法和CommonsChunkPlugin中的children選項
上面的例子都是基于require直接靜態(tài)導入的，但是對于動態(tài)導入的require.ensure和動態(tài)import函數(shù)來說田篇，情況比較特殊替废，因為他們是直接生成目標模塊的chunk并掛在當前所在chunk下。如a是父親斯辰，b舶担、c是兒子，在動態(tài)引入情況下彬呻，b衣陶、c可能包含相同的模塊。
children闸氮、async就是用來處理子chunk有重復模塊的剪况。
children:true表示chunks等于當前chunk的所有子chunk(你也可以手動chunks:["..."]來選擇它的所有子chunk，前提是你要清晰地知道所有子chunk的chunk name)蒲跨，然后邏輯同上译断，把選中的chunks的重復模塊抽出，合并到當前模塊或悲，換種新的說法就是把子chunk重復的模塊抽出到父chunk孙咪。
async:true表示異步的堪唐，作為 options.name 的子模塊，和 options.chunks 的兄弟模塊被創(chuàng)建(官網(wǎng)的解釋夠鬼畜的)翎蹈。簡單來說淮菠，就是chunk的重復模塊會被抽出，重新組合成一個新的chunk而不是合并到當前chunk荤堪。存在的意義基本上就是為上面那個children合陵，作用是把子chunk重復模塊抽出成新的chunk，不要合并到父chunk中
SplitChunksPlugin
不知道上面有沒有繞暈你澄阳，反正是有點復雜的難說明的拥知。因此webpack4.0后提供一個新的分包插件SplitChunksPlugin，讓你可以開箱即用碎赢，高度抽象低剔。
用法方面，直接當做webpack配置使用即可揩抡，不用再去new一個plugin
splitChunks: {
chunks: "async",
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
上面是默認配置户侥，你的更改會被合并到該配置中。最外層的配置充當全局配置峦嗤，可被cacheGroups中的配置給繼承和局部覆蓋。
這個不再需要我們?nèi)シ治鍪裁锤缸觕hunk屋摔、哪些chunk之間可能相同需要抽取等等烁设。即使你硬要配置，也只用站在全局角度去考慮首屏靜態(tài)加載的js文件最大數(shù)量maxInitialRequests钓试、動態(tài)加載的最大js數(shù)量maxAsyncRequests等装黑，比起CommonsChunkPlugin那坨東西舒服多了。
詳細學習可右轉(zhuǎn):Webpack4之SplitChunksPlugin
