在配置webpack的时候,我们比较常用的一个插件叫做CommonsChunkPlugin,这个玩意是用来将多个chunk中公共的module提取出来,变成一个新的chunk,但是它的配置里面有一个children和async,大致如下:

一直搞不懂什么意思,今天看到了webpack中的ensure方法,才理解了原来这个children是为ensure方法准备的。

初步认识

我们知道在webpack中最常用的引用文件是通过require来引用的,刚开始研究children属性的时候,写的demo都是按照require去写的,发现不管怎么写都没有出现多余的chunk文件,而children配置的意思就是选中指定入口文件的子chunk,提取子chunk的公共部分到parent里面。可是不管怎么尝试都没有效果。

后来想到webpack中还有另一种引用的方式:ensure,和require不同,ensure会重新开一个chunk,这个只会在需要的时候通过jsonp引入,我们先来看个简单的例子:

新建main.js,first.js,second.js,入口为main.js,main.js中通过ensure引用first.js和second.js,各个js代码如下所示:

(最终的目录结构如下图):

最简单的打包,不用CommonsChunkPlugin,关键代码如下:

我们来看看打包的结果:

我们可以发现,除了main.js之外,多了index.js和second.js,这两个是怎么出来的呢?答案就是ensure,ensure有三个参数,第一个是依赖,这里是空,第二个是回调方法,表示里面需要require哪些东西,会把这些东西从main里面剥离出来,第三个是chunk的名字,就是我们output里面设置的chunkFilename中的[name]。

也就是说打包出来的index.js里面是全部是src下index.js,打包出来的second.js里面全是src下的second.js。我们可以很明显的发现他们都共同引用了common.js和jquery,那么如何把first.js和second.js里面的common.js和jquery.js分离出来呢?答案就是children配置了。

这里如果只是设置了children为true,没有设置async,那么将会把公共的代码(common.js和require.js)代码打包进main.js。如果设置了async:true,那么会生成一个例如0.chunk.js之类的chunk(不一定是,但是是按照序号分),如果设置async:'common-chunk',那么就会生成一个[name].chunk.js的chunk,(具体的格式是根据output中的chunkFilename设置来的,其中的[name]就是你设置的async的字符串)

我们来试试children:true,async:'common-trunk'的情况,CommonsChunkPlugin配置如下:

打包结果如下:

我们来看一下common-trunk里面的内容:

说明我们分离成功了!

需要注意的是,如果ensure里面的第一个参数是有内容的,那么这个会和第二个参数中的require一起打包,但是它不会立刻执行,会立刻执行的只有回调中的require。如果我们利用children配置打包的话,如果依赖相同(ensure的第一个参数),也会被一起打包。

关于上面说的我们可以简单的测试一下,稍微修改main.js如下:

我们给两个ensure加上了相同的依赖:thrid.js。同样打包,我们来看看最后的common-trunk中:

我们可以看到,相同的依赖也被打包进来了。

在设置了children和async的时候,我们注意到有一个name,这个时候name表示需要扫描哪个下面的ensure chunk,为了验证,我们可以新增两个模块,main1.js和four.js,内容如下:

然后我们只对main1.js进行扫描,关键代码如下:

打包结果如下:

我们看最后打包的common-trunk,我们可以发现main1.js中ensure的交叉依赖four.js,但是找不到main.js中ensure的交叉依赖third.js,因此说明我们只是对main1.js中的ensure进行了抽离。

如果你想同时对main.js和main1.js的ensure进行抽离,可以不设置name,默认就是对entry下所有的进行扫描,或者设置name:['main.js','main1.js'],表示同时扫描多个。

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字