因为有同事分享了webpack的代码切分，其中提到了SplitChunksPlugin。每个人对文档中的描述都有不同的理解，所以打算一探究竟。问：什么是SplitChunksPlugin？SplitChunksPlugin有什么用？答：最初，块（和内部导入的模块）通过内部webpack图中的父子关系相关联。CommonsChunkPlugin用于避免它们之间的重复依赖，但无法进一步优化。从webpackv4开始，CommonsChunkPlugin被移除并被optimization.splitChunks取代。SplitChunksPlugin可以对chunkwebpack的中文文档进行去重分离。SplitChunksPlugin的说明如下：根据上面第二点，新chunk的体积大于20kb（min+gz之前的体积）。有同事是这样理解的：当chunk大于20kb时，webpack会解压当前chunk。一般100kb的包会被解包成5个包，即5*20kb=100kb。如果有并发请求限制，webpack会自动解压一些包Merge，如果并发请求数为2，那么100kb的包会被拆分成2块，每块大小为50kb，即2*50kb=100kb。但是对此我有不同的看法：既然这个插件是用来拆分代码的，就没有必要合并代码，这样会使插件不纯，增加插件逻辑的复杂度，所以这句话的意思应该是是拆分的新块大于20kb。既然不是三言两语就能说服大家，我打算查查资料，想办法验证一下到底是怎么回事。Documentation1.英文文档首先，为了避免中文语言博大精深，可能导致个人理解出现偏差，我先查了一下英文文档。英文文档是这样描述的：关键字newchunk:newchunks,onlyseparatedones是一个新的chunk，所以这句话的意思应该是newchunkwillbelargerthan20kb。2、社区文章其次，为了避免自己的英文理解再次出现偏差，浏览了网上的一些社区文章：作者：前端论道链接：https://juejin.cn/post/6844904103848443912来源：RareEarthNuggets来自上图可以看到，第三方包vue已经超过了默认的20kb，直接分成一个单独的2.js包，而不是按照20kb平均分成多个包。动手实践//index.jsimport"./a";console.log("thisisindex");//a.jsimport"vue";import"react";import"jquery";import"lodash";安慰。log("thisisa");//webpack.config.jsconstpath=require('path');module.exports={mode:"production",entry:'./src/index.js',输出：{filename:'[name].js',path:path.resolve(__dirname,'dist'),},优化：{splitChunks:{chunks:'all',},},};编译结果：从编译结果可以看出，除了main.js之外，就多了一个205kb的46.js。从上图可以看出，vue、jquery、lodash等都被打包成46.js，并没有按照20kb平分很多chunk。结论newchunk的volume大于20kb（min+gz之前的volume），也就是说导入的依赖中，min+gz之前的volume大于20kb，这个dependency会被分割成一个newchunk。新问题到这里还没有结束，因为我还有几个问题：webpack为什么要进行代码拆分？浏览器的并发请求一般不是4到6个吗？为什么文中提到的点播请求和初始请求小于等于30？为什么webpack需要代码拆分？前端代码体积变大，编译调试上线需要很长时间。开发时修改一行代码，需要重新打包整个脚本。用户需要花费额外的时间和带宽来下载更大的脚本文件。1.按需加载首次加载只加载必要的内容，提高用户首次加载的速度。其他模块可以根据用户交互按需加载，即当用户跳转到一个新的路由或者点击一个页面时，就会加载。2、缓存的有效使用通过webpack，在打包的时候对代码进行了分割，可以有效的利用缓存：打包编译的时候，只需要编译需要更新的部分；用户访问时，只需下载修改后的文件即可。场景：你有一个巨大的文件，只更改一行代码，用户仍然需要重新下载整个文件。但是如果你把它拆分成两个文件，那么用户只需要下载修改后的文件，浏览器就可以从缓存中加载另一个文件了。3.Prefetch/preload模块预取（prefetch）：以后在某些导航下可能需要的资源：这会生成
