初衷

webpack4问世两个月后，我发现包括我在内的所有人都还在探索splitChunk的使用。我也看了很多别人的配置演示，他们都觉得不满意或者没有得到很好的回答。问题下面的问题没人回答，只好自己操作。对了，录下来。如果你有更好的，请在评论区留下你的地址。

公共参数

MinSize(默认值为30000):形成新代码块的最小卷minChunks(默认值为1):分区前应引用此代码块的最小次数(翻译：确保代码块的可重用性，默认配置策略是无需多次引用即可进行分区)maxInitialRequests(默认值为3):一个条目的最大并行请求数maxAsyncRequests(默认值为5):区块(默认为异步):初始、异步和全部测试：用于控制该缓存组匹配哪些模块。如果原封不动地交付，它将默认选择所有模块。可以传递的值类型：RegExp、String和Function name(打包块的名称):String或Function(可以根据条件自定义名称)priority:打包缓存组的优先级。如果您仍然不熟悉这些配置，请到最后查看文档

文本

首先查看所有配置，然后根据演示运行常见需求。

优化： {分割区块： {区块：' async '，//您必须从三个选项中选择一个：'初始' | 'all '(推荐)| 'async '(默认为async) minSize: 30000，//最小大小。30000 minChunks: 1，//min chunk，默认1 maxasyncrequests 3360 5，//max异步请求，默认5 maxinitialrequests 3360 3，//max初始化请求，默认3automaticnamelimiter:' ~ '，//打包分隔符名称：函数(){}，//打包后的名称，此选项可以接收函数cachegroups 3360 {//在此开始设置缓存Chunks优先级33600。//缓存组优先级vendor: {//key是条目中定义的条目名称chunks: ' initial'。//必须从三项中选择一项：“初始“|”all“|”async(默认情况下为async)test 3360/react | lo dash/。//常规规则验证，如果一致，提取块名： 'vendor '，//分离要缓存的块名minsize: 30000，minchunks 3360 1，enforce 3360 true，maxasyncrequests 3360 5，//最大异步请求数，缺省为1 maxInitialRequests : 3，//最大初始化请求数，缺省为1 reusexistingchunk 3360 true//可以设置是否重用此块}}}，

条目： { page a : }。/pagea '，//参考utility 1 . js utility 2 . js page b 3360 '。/pageb '，//参考utility 2 . js utility 3 . js page c : '。/pagec'/参考utility2.js utility3.js}，optimization : { splitchunk s 3360 { cachegroups 3360 { common s : { chunk s 3360 ' initial '，minChunks: 2，maxInitialRequests: 5，//默认限制太小，无法展示minsize : 0 0 0的效果//这是一个太小，无法创建commons chunks }的示例，结果如图所示。一切正常。文件commons~pageA~pageB~pageC.js是utility2 . js commons ~ pageb ~ pagec.js，根据上面的代码，utility 2被引用了三次，先从commons ~ pagea ~ pageb ~ pagec.js中拉出来，然后utility3被引用了两次，放入commons ~ PageB ~ PageC . js中，最后只有utility1.js被引用了一次，直接放入pageA.js中，如果这里utility1.js被引用了两次，他会新建一个

mpageA.js页面B.js页面C.js

这里有一个需要优化的地方，就是pageA.js pageB.js pageC.js里面代码不多，但是包很大，肯定是webpack的一些运行文件，直接用runtimeChunk添加的

RuntimeChunk: 'single' //相当于runtime chunk : { name : ' manifest ' }，现在就好了

引用第三方模块页面引用

供应商： {test :/node _ modules/，chunks :' initial '，name :' vendor '，优先级： 10，enforce 3360 true}但是，在这种情况下，pageA pageB pageC的所有库将一起打包在vendor.js中

如果我想把这个vendor.js拆分成pageA-vendor.js pageB-vendor.js呢？我尝试了很久，尝试了最简单的方法，摆脱手工厂商，让插件自动处理。

splitChunks: { chunks: ' all '、cache group s 3360 { common s 3360 { chunk s 3360 ' initial '、minChunks: 2、maxInitialRequests: 5、//默认限制太小，无法展示effectinomsizes : 0 0//此示例太小，无法创建commons chunks } }，

后来我把webpack模式改成生产后，发现没用。同样的配置，在生产模式下，打包的东西有点奇怪，厂商-pageB.js合并到了pageB.js。

后来我折腾了很久也分析不出原因。我以某种方式把它扔了出去，还是我手动把它自动化了

commons: { chunk s : ' initial '，minChunks: 2，maxInitialRequests: 5，//默认限制太小，无法展示minSize: 0的效果0 //这是一个太小，无法创建common s :块的示例}，Vendor-paga ' : { test :/vue/，//直接使用test进行路径匹配。组块： '初始'，名称： '供应商-页面a '，强制3360 true，}，供应商-页面b' : {test:/react/，//直接使用test进行路径匹配。Chunks :' initial '，name :' vendor-pageb '，enforce 3360 true，}，成功打包了您想要的内容。

动态介绍

大家应该都很熟悉动态引入，也就是延迟加载，它直接将common-async.js动态引入pageA和pageB页面。在这里，我将首先讨论splitChunk，它可以自动处理commonChunk中的异步和子对象。

导入(/* WebPACKchunk name : ' common-async . js ' */')。/common-async ')。然后(common={ console . log(common))；})还不错，包装成功

这次再试一次，并在这个common-async.js中引入公共代码f.js，看看它是否会被重复打包

F.js成功拉出来，其他文件没有重复打包，挺好的。

注意地方

缓存组继承并覆盖了splitChunks的配置项，但是test、priorty和reuseExistingChunk只能用于配置缓存组。最好给cacheGroups中的每个项目添加chunks参数，否则您可能无法打包您想要的内容。默认情况下，最小大小为30KB(请注意，该卷在压缩之前)。如果小于30kb，则必须设置一个值，否则可能无法打包想要的内容，应该在cacheGroups中添加。优先级在某些情况下很有用。您可以设置打包块的优先级。在上例中，配置了一个commons，这里的名称可以自行设置，也可以不设置。不是我设置的。你可以试试它设置的时候是什么样子，然后你就会明白在某些情况下最好不要设置这个名字。

Commons : {组块： '初始'，最小组块： 2，最大初始请求3360 5，//默认限制太小，无法展示效果Minsize 3360 0，Name :' Commons'}，源代码

代码分段

代码延迟加载

参考文章

webpack文档的正式演示

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。