详解webpack拆包—splitChunks.chunks

前言

今天主要讲解一下webpack的拆包逻辑，现在的webpack实际上有一套默认的拆包逻辑，这个默认配置对绝大多数用户来说非常友好。

webpack 将根据以下条件自动拆分 chunks：

• 新的 chunk 可以被共享，或者模块来自于 node_modules 文件夹
• 新的 chunk 体积大于 20kb（在进行 min+gz 之前的体积）
• 当按需加载 chunks 时，并行请求的最大数量小于或等于 30
• 当加载初始化页面时，并发请求的最大数量小于或等于 30

也就是说他的默认配置是这样的：

今天我们主要来学习一下chunks这个属性.

chunks

chunks作为splitChunks的一个重要属性‼️，主要是用来告知webpack采用什么方式来优化分离chunks

它的值可以是一个字符串，也可以是一个函数，当提供一个函数时，更多是用来做一些自定义控制，这个函数的返回值将决定是否包含每一个chunk

我们一般用的更多的是字符串形式，当提供一个字符串时，有效值为：all、async、initial

默认值为async

文档上对这三个值都有介绍，但你可能不是那么容易理解，今天我们就来详聊这三个属性之间的差异

async

首先我们来看默认值async

它表示的是只选择通过import()异步加载的模块来分离chunks

比如：

我们有两个入口文件index.js与index2.js，两个模块文件nanjiu1.js与nanjiu2.js

两个入口文件对于nanjiu1.js都是异步导入，对于nanjiu2.js都是同步导入

此时的打包结果是这样的：

对于异步导入的模块，webpack会将它单独分离出来复用，而对于同步导入的模块并不会单独分离出来

initial

它表示不会将异步导入与同步导入一起处理，而是分开处理

还是上面那个例子：两个入口文件对于nanjiu1.js都是异步导入，对于nanjiu2.js都是同步导入

我们将配置改为initial，再来重新打包试试：

可以看到同步与异步的导入都被分离出来了

这样效果到挺好，但是上面的例子我们对于nanjiu1.js都是异步导入，对于nanjiu2.js都是同步导入，如果对于同一个模块既有同步导入又有异步导入时，它会如何处理呢？🤔

这里我们对于nanjiu1.js改成了既有同步导入又有异步导入，来看看对于initial的打包结果是什么：

从上图中我们可以看到，单独输出的nanjiu1.js是index2.js中的异步导入，而对于index1.js中同步导入的nanjiu1.js并没有被单独分离出来。也就是说在 initial 设置下，就算导入的是同一个模块，但是同步导入和异步导入是不能复用的。

所以这种模式要慎用，因为它打包出来的包体积不是最优解

all

对于all属性，webpack文档上也说过该属性非常强大

该属性表示 chunk 可以在异步和非异步 chunk 之间共享

同样还是上面的例子：

这里我们对于nanjiu1.js改成了既有同步导入又有异步导入，来看看对于all的打包结果是什么：

从上图中我们可以看到，无论是同步的导入还是异步的导入，都会被单独分离出来。所以 all 在 initial 的基础上，优化了不同导入方式下的模块复用。

总结

• async：只会将异步加载的模块分离出来
• initial：对于同步与异步加载的模块分开处理，也就是说对于同一个模块的同步加载与异步加载无法复用
• all：无论是同步加载的模块还是异步加载的模块，都会单独分离出来

所以想要更好的复用公共模块，all的模式是最优解。

原文链接：https://juejin.cn/post/7395962823502102562