众所周知，以上都是分包插件。

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

众所周知，也是个分包插件

详细介绍看这里 

结果就是：

我们使用 webpack 内置的 DllPlugin 和 DllReferencePlugin插件，通过这两个插件提前对这些公共模块进行独立编译，打出一个 vendor.dll.js 的包，之后在这部分代码没有改动的情况下不再对它们进行编译，所以项目平时的构建速度也会提升不少。vendor.dll.js 包独立存在，hash 不会发生变化，特别适合持久化缓存。

于是，我们的业务代码有变化时，只需要以新版号发布业务包（app.js）即可，vendor.dll.js 依然使用本地缓存。再配合上pwa，感觉瞬间就高端了呢

 

3.SplitChunksPlugin

众所周知，

webpack4中使用它，功能还是一样了

详情