眾所周知，以上都是分包插件。
1.CommonsChunkPlugin
大家都很常用的分包工具，原理就是：將指定的模塊或者公用模塊打包出來，減少主bundle文件的體積，配合緩存策略，加快應用訪問速度。
如何使用？看得最多的應該是以下代碼
new webpack.optimize.CommonsChunkPlugin({ // 這里的意思是將node_module中的模塊抽離出來，成為vendor
name: 'vendor',
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
// 判斷三個條件：有在處理的模塊，並且是js文件，並且這個文件是在node_modules中
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// // extract webpack runtime and module manifest to its own file in order to
// // prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({ // 這里是從vendor里面把runtime 這部分代碼抽離出來，名字是manifest
name: 'manifest',
chunks: ['vendor'] // 這個屬性的意思是通過 chunk name 去選擇 chunks 的來源。chunk 必須是 公共chunk 的子模塊，指定source chunk，即指定從哪些chunk當中去找公共模塊，省略該選項的時候，默認就是entry chunks
// minChunks: Infinity // 這種寫法和上面的寫法效果一樣，會馬上生成公共chunk，但里面沒有模塊
}),
如上代碼的注釋，構建出來會發現多了vendor.js和manifest.js,其中vendor中是node_module中的三方庫，manifest是基於vendor包繼續抽取的公用包。
配合 HtmlWebpackPlugin 插件 我們可以自動引入對應包，但是要注意：manifest必須在vendor之前引入，畢竟前者是后者的公共部分
new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunks: ['manifest', 'vendor', 'app'], // app是入口文件 chunksSortMode: 'dependency' }),
根據以上代碼，會發現如果改動了業務代碼，重新構建的vendor包的hash哈希值並沒有變化，說明啥，說明就可以讓第三依賴庫實現了用戶端和服務端持久緩存，每次上線更新只要部署app.js就好了。
這是因為咱們通過
new webpack.optimize.CommonsChunkPlugin({ // 這里是從vendor里面把runtime 這部分代碼抽離出來，名字是manifest name: 'manifest', chunks: ['vendor'] // 這個屬性的意思是通過 chunk name 去選擇 chunks 的來源。chunk 必須是 公共chunk 的子模塊，指定source chunk，即指定從哪些chunk當中去找公共模塊，省略該選項的時候，默認就是entry chunks // minChunks: Infinity // 這種寫法和上面的寫法效果一樣，會馬上生成公共chunk，但里面沒有模塊 }),
這段代碼，把vendor里面的webpack運行代碼抽出來了，vendor就可以理解為靜態資源咯。去掉這段，你會發現改動業務代碼，vendor包的hash值會變化。
但是，如果在業務代碼中刪除和增加三方庫依賴，vendor是會變化的，所以上線更新只要部署app.js是在你不會更新依賴的前提下。但很難保證這一點，那么dll來了
2.Dllplugin &DllReferencePlugin
眾所周知，也是個分包插件
詳細介紹看這里 https://juejin.im/entry/598bcbc76fb9a03c5754d211
結果就是：
我們使用 webpack 內置的 DllPlugin 和 DllReferencePlugin插件，通過這兩個插件提前對這些公共模塊進行獨立編譯，打出一個 vendor.dll.js 的包，之后在這部分代碼沒有改動的情況下不再對它們進行編譯，所以項目平時的構建速度也會提升不少。vendor.dll.js 包獨立存在，hash 不會發生變化，特別適合持久化緩存。
於是，我們的業務代碼有變化時，只需要以新版號發布業務包（app.js）即可，vendor.dll.js 依然使用本地緩存。再配合上pwa，感覺瞬間就高端了呢
3.SplitChunksPlugin
眾所周知，
webpack4中使用它，功能還是一樣了
詳情 ：https://segmentfault.com/a/1190000015938570
https://github.com/webpack/webpack/tree/master/examples/common-chunk-and-vendor-chunk