webpack 如何抽离公共代码和第三方库？

假设有下面三种场景

场景一：index.js 和 other.js 文件同时引入 common.js 文件，打包的时候 index.js 和 other.js 中的 common.js 会打包两次。这种情况如何处理？

场景二：index.js 和 other.js 两个文件同时引入第三方模块 lodash，若 lodash 体积过大，每次打包会打两次。这种情况又如何处理？

场景三：index.js 和 other.js 两个文件同时引入第三方模块 lodash，若每次对 index.js 或 other.js 做了很微小的修改，再次打包时 lodash 又莫名其妙的打包两次。针对这种浪费资源的情况应该如何处理？

以上三种场景，都会被动的把公共代码 或 第三方库 打包多次，导致打包出来的代码体积过大，浪费资源，所以要把公共代码或第三方库单独抽离出来。抽离后，如果公共代码没有修改，再次打包时，直接命中缓存，不会再次打包。

配置一：splitChunks 分割代码块

相关属性

• priority:1 抽离权限，数字越大，越优先抽离
• minSize:0 公共模块的大小，超过设置的值，代表抽离
• minChunks:1 最少复用的次数，若引用超过一次，对该模块抽离
  

配置二：chunk 的引用

chunks:[] 代表该页面需要分割的哪些代码块

打包后的 dist 文件内，会生成 common.js 和 vendor.js 文件，此时包被拆开。之后，若公共模块代码未修改，则不会被再次打包。