[4] WebPack打包一、chunks的三种形态 1.1 基本概念概念含义 entry 入口 webapack执

一、chunks的三种形态

概念	含义
entry	入口 webapack执行构建的第一步从entry开始，可抽象为输入
module	模块在webapck中一切皆模块，一个模块对应一个文件。webapck从配置entry开始递归找出所有以来的模块。
chunk	代码块，一个chunk由多个模块组成，用于代码合并与分割
bundle	bundle就是webPack打包后的各个文件，一般和chunk是1:1的关系，是由chunk编译打包后产出的。

WebPack拆分出来的的chunk（代码块）有3种形态，分别为

下面分别讲解以上3种形态。

impor()语法的异步加载：juejin.cn/post/684490…
原理： import()对于WebPack来说，是一个天然的分割点，也就是说，WebPack碰到import()会对import()进行解析。
import()解析过程：

首先，webpack遇到import方法时，会将其当成一个代码分割点，也就是说碰到import方法了，那么就去解析import方法。
然后，import引用的文件，webpack会将其编译成一个jsonp，也就是一个自执行函数，然后函数内部是引用的文件的内容，因为到时候是通过jsonp的方法去加载的。
具体就是，import引用文件，会先调用require.ensure方法(打包的结果来看叫require.e)，这个方法主要是构造一个promise，会将resolve，reject和promise放到一个数组中，将promise放到一个队列中。
然后，调用require.load(打包结果来看叫require.l)方法，这个方法主要是创建一个jsonp，也就是创建一个script标签，标签的url就是文件加载地址，然后塞到document.head中，一塞进去，就会加载该文件了。
加载完，就去执行这段jsonp，主要就是把moduleId和module内容存到modules数组中，然后再去走webpack内置的require。
webpack内置的require，主要是先判断缓存，这个moduleId是否缓存过了，如果缓存过了，就直接返回。如果没有缓存，再继续往下走，也就是加载module内容，然后最终内容会挂在都module,exports上，返回module.exports就返回了引用文件的最终执行结果

属性	说明	备注
chunks	chunks的含义是拆分模块的范围，它有三个值async、initial和all。- async: 默认值，异步加载import()的才会打到这个包中- initial: 同步加载的才会打到这个包中- all: 同步+异步	我们拆包时chunks赋值为initial这个，因为异步加载的import()会单独打包到一个chunk中。
automaticNameDelimiter	名称分隔符，默认～公共的部分提取出来，abc.js 代表 a.js、b.js 、c.js共用的部分提取出来单独打包了
cacheGroups这个就是重点了，我们要切割成的每一个新chunk就是一个cache group。	test(module, chunks) { },	可以为字符串，正则表达式，函数，以module为维度进行抽取，只要是满足条件的module都会被抽取到该common的chunk中，为函数时第一个参数是遍历到的每一个模块，第二个参数是每一个引用到该模块的chunks数组。
priority	优先级，一个chunk很可能满足多个缓存组，会被抽取到优先级高的缓存组中
reuseExistingChunk: true，默认值为true默认使用已有的模块	如果该chunk中引用了已经被抽取的chunk，直接引用该chunk，不会重复打包代码
enforce: true	忽视splitChunks.minSize, splitChunks.minChunks, splitChunks.maxAsyncRequests 和splitChunks.maxInitialRequests
chunks	同上
name	切割之后代码块的命名

注意： splitChunks的配置项都是作用于cacheGroup上的，如果将cacheGroup的默认两个分组vendor和default设置为false，则splitChunks就不会起作用

提取公共代码vendors 和 common。

默认从entry的js中拆分了2个chunk。一个是将node-modules打包到vendors chunk中。一个是将项目引用2次的放到一个chunk中。

以上都是压缩包体积的优化手段，可合理使用

impor()语法的异步加载：juejin.cn/post/684490…