1.SplitChunksPlugin的概念首先，通过webpack内部的父子关系图将导入其中的chunks（代码块）和模块连接起来。在webpack3中，使用了commonsChunkPlugin来避免它们之间的依赖重复。在webpack4中，CommonsChunkPlugin被移除，取而代之的是optimization.splitChunks和optimization.runtimeChunk配置项。下面显示了它们将如何工作。默认情况下，SplitChunksPlugin仅影响按需加载的块，因为更改初始块会影响HTML文件应包含的脚本标签，以便运行项目。webpack会根据以下条件自动拆分代码块：将要共享的代码块或node_mudules文件夹中的代码块大于30KB（gz压缩前）和按需加载代码块时的并行请求数不超过5加载初始页面时的并行请求数不超过3示例1：//index.js//动态加载a.jsimport('./a')//a.jsimport'vue'//...打包后的结果会创建一个独立的代码块，其中包含vue.当调用包含a.js的原始代码块时，会并行请求这个独立的代码块。原因：vue来自node_modules文件夹。vue体积超过30KB。导入调用时并行请求数为2，不影响页面初始加载。我们这样做的原因是因为vue代码不像你的业务代码那么频繁的变化，所以单独提取出来的时候，可以和你的业务代码分开缓存，大大提高了效率。示例2：//entry.jsimport("./a");import("./b");//a.jsimport"./helpers";//helpers的大小为40kb//...//b.jsimport"./helpers";import"./more-helpers";//more-helpers的大小也是40kb//...结果：将创建一个包含./more-helpers的块，用于所有依赖项。在导入调用中，此块与原始块并行加载。原因：条件一：helpers是共享块条件二：helpers大于30kb条件三：导入调用的并行请求数为2条件四：初始页面加载时不影响请求2.SplitChunksPlugin的默认配置下面是SplitChunksPlugin的默认配置：splitChunks:{chunks:"async",minSize:30000,//模块的最小大小minChunks:1,//模块的最小引用数maxAsyncRequests:5,//ThemaximumnumberofparallelrequestsloadedondemandmaxInitialRequests:3,//一个条目的最大并行请求数automaticNameDelimiter:'~',//文件名的连接器name:true,cacheGroups:{//缓存组供应商:{test:/[\\/]node_modules[\\/]/,priority:-10},default:{minChunks:2,priority:-20,reuseExistingChunk:true}}}缓存组：缓存组应该是SplitChunksPlugin中最有趣的功能。在默认设置下，node_mudules文件夹中的模块会被打包成一个名为vendors的bundle，所有被引用超过两次的模块都会被分配到defaultbundle中。也可以通过priority设置优先级。chunks：chunks属性用于选择要划分哪些代码块。可选值有：'all'（所有代码块）、'async'（按需加载的代码块）、'initial'（初始化代码块）。3、在项目中添加SplitChunksPlugin为了演示方便，我们先安装两个类库：lodash和axios，npmilodashaxios-S修改main.js，导入lodash和axios并调用对应的方法：importModalfrom'./components/modal/modal'import'./assets/style/common.less'import_from'lodash'importaxiosfrom'axios'constApp=function(){letdiv=document.createElement('div')div.setAttribute('id','app')document.body.appendChild(div)letdom=document.getElementById('app')letmodal=newModal()dom.innerHTML=modal.template({title:'Title',content:'content',footer:'bottom'})}constapp=newApp()console.log(_.camelCase('FooBar'))axios.get('aaa')使用SplitChunksPlugin不会需要安装任何依赖项，只需将优化属性添加到webpack.config.js中的配置对象：[\\/]节点模块[\\/]/,优先级:1}}},runtimeChunk:{name:entrypoint=>`manifest.${entrypoint.name}`}}配置runtimeChunk会为每个entry添加一个额外的只包含runtime的代码块，name的值也可以是字符串，但是这样会为每个entry添加相同的runtime，配置为一个函数返回的时候对于当前入口对象，可以为每个入口设置不同的运行时间。让我们安装一个webpack-bundle-analyzer。这个插件会清楚的显示出每个bundle打包后依赖的模块：npmiwebpack-bundle-analyzer-Dimport:constBundleAnalyzerPlugin=require('webpack-bundle-analyzer')使用BundleAnalyzerPlugin，只需在plugins数组中加入：newBundleAnalyzerPlugin()打包后：各个模块依赖清晰可见，打开dist/index.html可以看到我们的代码运行流畅：以上是基本用法SplitChunksPlugin，你可以继续研究更高级的配置（比如多入口应用）。
