使用方法:在 webpack config 的 plugins 属性里添加 CommonsChunkPlugin 实例即可。
实例化的配置项「options」如下:
name 或者 names:chunk的名称,如果是 names 数组,则相当于为数组里的每个name 实例化插件。如果缺省,而且 children 或者 asyn 为 true,那么,所有的 chunks 都会被使用。
filename:此 common chunk 的文件名模板,可以与 output.filename 一样
minChunks:通常情况下这是一个整数,表示至少有 minChunks 个 chunk 使用了该模块,该模块才会被挪到公共代码「common chunk」里。minChunks 还可以是 Infinity,意味着将没有任何模块被移入进来,只是创建当前这个 chunk,这通常用来生成 jquery 等第三方代码库。minChunks还可以是一个返回布尔值的函数,返回 true 该模块会被移入 common chunk,否则不会。默认值是 chunks 的长度。
chunks:这是一个元素为 chunk 名称的数组,插件将会从这些 chunks 里提取 common chunks。可见,minChunks 如果是整数,那么它应该小于 chunks 的长度,且大于1。如果缺省,所有的入口 chunks 会被选中。
children:默认false。如果为 true ,相当于上一项 chunks 配置为当前 chunk 的子 chunk,用于 code split。
async:默认false。如果为 true,生成的 common chunk 将会是异步加载的。这个异步的 common chunk 是 name 这个 chunk 的子 chunk,而且跟 chunks 一起并行加载
minSize:如果有指定大小,那么 common chunk 的文件大小至少有 minSize 才会被创建。非必填项。
提示:以上配置项理解起来有些复杂,应结合实际案例运行的结果来理解
CommonsChunkPlugin 能解决的问题
在使用插件前,考虑几个问题:
-
对哪些 chunk 进行提取,这决定了 chunks ,children 和 name 要怎么配置
-
common chunk 是否异步,这决定了 async 怎么配置
-
common chunk 的粒度,这决定了 minChunks 和 minSize 怎么配置
以下是官方给出的常用的场景:
-
提取两个及两个以上 Chunk 的公共代码
-
将 Code Split 切割出来的 Chunk「就是子 Chunk」,提取到父 Chunk
-
将 Code Split 切割出来的 Chunk,提取到一个新的异步加载的 Chunk
-
提取某个类似 jquery 或 react 的代码库「但是这个用得很少,使用用 dll 插件来打包会更好一些,一下篇介绍」
例1:chunks 的公共代码,生成 page-comm
例2:将 code split 的公共子 chunk 提取到父 chunk
topic.js 使用了 code split
例3:将 Code Split 切割出来的 Chunk,提取到一个新的异步加载的 Chunk
async 设置为true,与例2一样,不同的是例2提取到父 chunk,这样会增加父 chunk 的文件大小,而例3提到一个新的 chunk 里,这个 chunk 是异步加载的。
多跑实例,理解各配置项产生的影响
标签:异步,抽取,--,chunk,webpack,common,chunks,minChunks,Chunk From: https://www.cnblogs.com/zaishiyu/p/15988268.html