摘要：，顾名思义，是用来把公用模块打包到一起的插件，以减小打包后文件的体积。令人迷惑的中文社区和官网都对此属性语焉不详。官网的解释我实在看不懂在被放到共同之前需要包含模块的的最小数量。当大于等于设定的值时，该模块就会被打包到公用包中。
CommonsChunkPlugin， 顾名思义，是用来把公用模块打包到一起的插件，以减小打包后js文件的体积。
令人迷惑的minChunks中文社区和官网都对此属性语焉不详。
首先，minChunks的Chunk是什么意思？
…… a separate file (known as a chunk).
意思是当entry属性的值为对象时，作为多个入口的文件们，每个都是一个chunk。
理解了chunk的定义，再来看看官网对minChunks的解释：
minChunks: number|Infinity|function(module, count) -> boolean,
// The minimum number of chunks which need to contain a module before it"s moved into the commons chunk.
// The number must be greater than or equal 2 and lower than or equal to the number of chunks.
// Passing Infinity just creates the commons chunk, but moves no modules into it.
// By providing a function you can add custom logic. (Defaults to the number of chunks)
需要重点关注的额是minChunks的number值。
官网的解释我实在看不懂：在被放到共同chunks之前需要包含模块的chunks的最小数量。
这是什么鬼意思，有没有洋文好的大佬翻译一下？
那么minChunks的值为number时，由什么效果呢？
经过我测试，发现minChunks是指某个模块最少被多少个入口文件依赖。
当大于等于minChunks设定的值时，该模块就会被打包到公用包中。
小于这个值时，该模块就会被和每个入口文件打包在一起。
比如，有八个入口文件，minChunks值为7，那么，就算某个模块被6个入口文件依赖了，这个模块也会被打包6次，每个依赖他的文件中都有一份相同的代码。
minChunks:Infinity搞懂了minChunks的number属性，Infinity属性就很好理解了。也就是不会把任何依赖的模块提取出来打包公用。
minChunks默认值当忽略此属性时，只有在被所有入口文件都依赖时，才会提取相应模块。
水平有限，说错了轻喷。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107390.html
摘要：续前端临床手札构建逐步解构上工作流程案例最近添加了雪碧图功能，并把替换成的，详细可以看分支构建生产上一篇说完了本地测试和是如何工作，接下来分析构建生产模式下配置如何配置和每个模块干了什么。 续 前端临床手札——webpack构建逐步解构（上） 工作流程 showImg(https://segmentfault.com/img/bVCXjo?w=793&h=410); 案例：multip...
摘要：未定义时使用作为文件名。表示公共创建所需要的所有模块的最小体积。如果设置为，公共的所有子模块将会被选中。使用来命名文件，实现文件缓存的功能。当文件内容发生变化，文件名会随之改变。代码中再次使用了，从中提取出了名为的运行时代码。 CommonsChunkPlugin配置简介 最近读了一下webpack的文档，读到CommonsChunkPlugin这个插件，深深折服于webpack的强大...
摘要：前言最近重新看了一遍提取公共文件的配置。这篇文章将以解决实际开发遇到的问题为核心，悉数利用提取独立文件模块的应用。利用插件是专门用来提取独立文件的，它主要是提取多个入口的公共模块。插入标签的这一步可以在打包好独立文件之前，就在模板中插入。 前言 最近重新看了一遍 webpack 提取公共文件的配置。原来觉得这东西是个玄学，都是 凭感觉 配置。这篇文章将以解决实际开发遇到的问题为核心，悉...
摘要：表示生成一个懒加载的，只有当需要时才会被加载。主要是作用域提升，将所有模块放在同一个作用域当中，一方面能提高运行速度，另一方面也能降低文件体积。前提是你的代码是用模块写的。参考文章学习小结 前言 之前接手公司一个前端项目，开发了几个月后越来越难以忍受项目结构的混乱和打包体积的臃肿（脚手架和基本功能代码都是从公司的其他项目复制过来的），如果不立即进行重构，难以想象以后要怎么维护各个产品线...
摘要：但是同时，抽离到父模块，也意味着如果有一个懒加载的路由没有用到模块，但是实际上引入了父模块，也为这也引入了的代码。 前言 我们清楚，在 webpack 中通过CommonsChunkPlugin 可以将 entry 的入口文件中引用多次的文件抽离打包成一个公用文件，从而减少代码重复冗余 entry: { main: ./src/main.js, ...
阅读 618·2021-10-25 09:48
阅读 435·2021-08-23 09:45
阅读 2400·2019-08-30 15:53
阅读 1618·2019-08-30 12:45
阅读 394·2019-08-29 17:21
阅读 3271·2019-08-27 10:56
阅读 2411·2019-08-26 13:48
阅读 568·2019-08-26 12:24
