源码分析(八):生成 chunk
module
构建完成后,回到文件 Compiler.js
的 compile
的 make
钩子的回调里:
this.hooks.make.callAsync(compilation, (err) => {
//...
compilation.finish((err) => {
//...
compilation.seal((err) => {
//...
this.hooks.afterCompile.callAsync(compilation, (err) => {
//...
return callback(null, compilation);
});
});
});
});
compilation.finish & compilation.seal
执行 compilation.finish
,触发 compilation.hooks
:finishModules
,执行插件 FlagDependencyExportsPlugin
注册的事件,作用是遍历所有 module
将 export
出来的变量以数组的形式,单独存储到 module.buildMeta.providedExports
变量下。
然后执行 reportDependencyErrorsAndWarnings
收集生成每一个 module
时暴露出来的 err
和 warning
。
然后走回调执行 compilation.seal
触发了海量 hooks
,为我们侵入 webpack
构建流程提供了海量钩子。我们略过本 demo
没有注册方法的钩子,执行:
this.hooks.seal.call();
触发插件 WarnCaseSensitiveModulesPlugin
:模块文件路径需要区分大小写的警告
this.hooks.optimizeDependencies.call(this.modules);
production
模式会触发插件:
SideEffectsFlagPlugin
:识别package.json
或者module.rules
的sideEffects
标志(纯的 ES2015 模块),安全地删除未用到的export
导出FlagDependencyUsagePlugin
:编译时标记依赖unused harmony export
用于Tree shaking
chunk 初始化
在触发 compilation.hooks
:beforeChunks
后,开始遍历入口对象 this._preparedEntrypoints
,为每一个入口生成一个 chunk
:
const chunk = this.addChunk(name);
该方法里做了缓存判断后执行 new Chunk(name)
,并同时添加 chunk
到 Compilation.chunks
,继续执行:
const entrypoint = new Entrypoint(name);
Entrypoint
类扩展于 ChunkGroup
类,是 chunks
的集合,主要用来优化 chunk graph
。
继续执行设置了 Compilation.runtimeChunk & Compilation.namedChunkGroups & Compilation.entrypoints & Compilation.chunkGroups
和 ChunkGroup.origins
,然后执行:
GraphHelpers.connectChunkGroupAndChunk(entrypoint, chunk);
GraphHelpers.connectChunkAndModule(chunk, module);
建立了 chunk
与 entrypoint
,chunk
与 module
之间的联系,然后执行:
this.assignDepth(module);
根据各个模块依赖的深度(多次依赖取最小值)设置 module.depth
,入口模块则为 depth = 0
。
遍历完 this._preparedEntrypoints
后,然后执行:
生成 chunk graph
buildChunkGraph(this, /** @type {Entrypoint[]} */ (this.chunkGroups.slice()));
buildChunkGraph
用于生成并优化 chunk
依赖图,建立起各模块之前的关系。 分为三阶段:
// PART ONE
visitModules(compilation, inputChunkGroups, chunkGroupInfoMap, chunkDependencies, blocksWithNestedBlocks, allCreatedChunkGroups);
// PART TWO
connectChunkGroups(blocksWithNestedBlocks, chunkDependencies, chunkGroupInfoMap);
// Cleaup work
cleanupUnconnectedGroups(compilation, allCreatedChunkGroups);
第一阶段
第一阶段主要建立了 chunkGroup,chunk,module
(包括同步异步)之间的从属关系。
先执行:
const blockInfoMap = extraceBlockInfoMap(compilation);
得到一个 map
结构: module
与该 module
内导入其他模块的关系,同步存入 modules
,异步存入 blocks
。以 demo
为例,得到 blockInfoMap
:
{
//...map结构
0:{
key:NormalModule, //a
value:{
blocks:[ImportDependenciesBlock],//异步
modules:[NormalModule] //b modules为set结构
}
},
1:{
key: ImportDependenciesBlock,
value:{
blocks: [],
modules:[NormalModule] //c
}
}
2:{
key: NormalModule, //c
value:{
blocks: [ImportDependenciesBlock],
modules:[NormalModule] //d
}
}
//........
}
继续执行,设置了 queue
数组,push
入口 module
和对应的 action
等信息组成的对象,用于 while
循环:
queue.push({
action: ENTER_MODULE,
block: module,
module,
chunk,
chunkGroup,
});
设置了 chunkGroupInfoMap
,他映射了 chunkGroup
和与他相关的信息对象:
chunkGroupInfoMap.set(chunkGroup, {
chunkGroup,
minAvailableModules: new Set(),
minAvailableModulesOwned: true,
availableModulesToBeMerged: [],
skippedItems: [],
resultingAvailableModules: undefined,
children: undefined,
});
然后执行:
while (queue.length) {
//...
while (queue.length) {
//...
if (chunkGroup !== queueItem.chunkGroup) {
// 重置更新chunkGroup
}
switch (queueItem.action) {
case ADD_AND_ENTER_MODULE: {
// 如果 queueItem.module 在 minAvailableModules,则将该 queueItem 存入 skippedItems
// 建立 chunk 和 module 之间的联系,将依赖的 module 存入该 chunk 里
}
case ENTER_MODULE: {
// 设置 chunkGroup._moduleIndices 和 module.index,然后 queue.push 一个新的该 module 的 queueItem,action 设为 LEAVE_MODULE
}
case PROCESS_BLOCK: {
// 0. 通过上文 blockInfoMap 映射关系及入口 module,找到入口 module 所依赖的其他同步、异步模块
// 1. 遍历其同步模块 modules,如果对应 chunk 已有此 module 则跳过;判断此 module 是否在 minAvailableModules,有则将一个新的 queueItem 存入 skippedItems,没有则存入 queue,其中 queueItem.action 都设为 ADD_AND_ENTER_MODULE
// 2. 遍历 blockInfoMap 里的异步模块 blocks
// 2.1 创建一个对应异步依赖的 chunkGroup 和 chunk,并建立两者的联系,然后更新了 compilation.chunkGroups 和 compilation.namedChunkGroups,chunkGroupCounters(计数 map),blockChunkGroups(映射依赖和 ChunkGroup 的关系 map),allCreatedChunkGroups(收集被创建的ChunkGroup set)
// 2.2 更新 chunkDependencies(map) 建立前一个 ChunkGroup 与新的 ChunkGroup 和 import 依赖的映射
// 2.3 更新 queueConnect(map) 建立前一个 ChunkGroup 与新的 ChunkGroup 的映射
// 2.4 更新 queueDelayed,同 queue,注意 module 是前一个的 module,action 为 PROCESS_BLOCK
}
case LEAVE_MODULE: {
// 设置 chunkGroup._moduleIndices2 和 module.index2
}
}
}
// 上文 while (queue.length) 从 enter module 开始,循环将所有同步依赖都加入到同一个 chunk 里,将 enter module 及它的同步依赖里的异步依赖都各自新建了chunkGroup 和 chunk,并将异步模块存入 queueDelayed,异步依赖中的异步依赖还未处理。
while (queueConnect.size > 0) {
// 计算可用的模块
// 1. 在 chunkGroupInfoMap 中设置前一个 ChunkGroup 的信息对象的 resultingAvailableModules, children
// 2. 在 chunkGroupInfoMap 中初始化新的 ChunkGroup 与他相关的信息对象的映射并设置了 availableModulesToBeMerged
if (outdatedChunkGroupInfo.size > 0) {
// 合并可用模块
// 1.获取设置新的 ChunkGroup 信息对象的 minAvailableModules
// 2.如果新的 ChunkGroup 信息对象的 skippedItems 不为空则 push 到 queue
// 3.如果新的 ChunkGroup 信息对象的 children 不为空,则更新 queueConnect 递归循环
}
}
// 把 queueDelayed 放入 queue 走 while 的最外层循环,目的的所有同步循环处理完后,然后才处理异步 module,如果异步 module 里还有异步 module,将放到下一次的 queue 走 while 的最外层循环
if (queue.length === 0) {
const tempQueue = queue; // ImportDependenciesBlock
queue = queueDelayed.reverse();
queueDelayed = tempQueue;
}
}
- 在内部
while
对queue.length
循环里(while+push
防递归爆栈,后序深度优先),从入口module
开始,解析了所有同步module
并建立了module
与chunk
的联系;解析了所有第一层异步(即非嵌套异步模块)的module
,并为每个不同的异步mudule
都新建了chunkGroup
和chunk
并建立了两者的联系。 - 然后在
while
对queueConnect.size
的循环里,更新了chunkGroupInfoMap
中前一个ChunkGroup
的信息对象和初始化了新的ChunkGroup
的信息对象,并获取了最小可用module
。 - 同步
module
循环处理结束后,开始处理异步module
,将queueDelayed
赋给queue
,走外部while
对queue.length
的循环。 - 处理异步模块的时候,
queue
里的block
为ImportDependenciesBlock
依赖,然后更新chunkGroup
后,switch
走PROCESS_BLOCK
获得本次异步对应的真正模块,后面的处理数据都将在新的ChunkGroup
信息对象上。就这样循环处理,最终得到一个Map
结构的chunkGroupInfoMap
。以本demo
为例,得到:
{
//...map结构
0:{
key:Entrypoint, //groupDebugId:5000
value:{
availableModulesToBeMerged:Array(0)
children:Set(1) {} //ChunkGroup 5001
chunkGroup:Entrypoint
minAvailableModules:Set(0)
minAvailableModulesOwned:true
resultingAvailableModules:Set(3)
skippedItems:Array(0)
}
},
1:{
key: ChunkGroup, //groupDebugId:5001
value:{
availableModulesToBeMerged:Array(0)
children:Set(1) {} //ChunkGroup 5002
chunkGroup:Entrypoint
minAvailableModules:Set(3)
minAvailableModulesOwned:true
resultingAvailableModules:Set(5)
skippedItems:Array(0)
}
}
2:{
key: ChunkGroup, //groupDebugId:5002
value:{
availableModulesToBeMerged:Array(0)
children:undefined
chunkGroup:Entrypoint
minAvailableModules:Set(5)
minAvailableModulesOwned:true
resultingAvailableModules:undefined
skippedItems:Array(1)
}
}
}
第二阶段
第二阶段主要根据 ImportDependenciesBlock
建立了不同 chunkGroup
之间的父子关系。
遍历 chunkDependencies
,chunkDependencies
是 Map
结构,保存着前一个 ChunkGroup
与新的 ChunkGroup
和 import
依赖之间的映射:
{
//...map结构
0:{
key:Entrypoint, //groupDebugId:5000
value:[
{
block:ImportDependenciesBlock,
chunkGroup:ChunkGroup //groupDebugId:5001
}
]
},
1:{
key:ChunkGroup, //groupDebugId:5001
value:[
{
block:ImportDependenciesBlock,
chunkGroup:ChunkGroup //groupDebugId:5002
}
]
},
}
在判断如果前一个 ChunkGroup
信息对象的可用模块 resultingAvailableModules
包含后一个 ChunkGroup.chunks[]._modules
,则分别建立 import
依赖与对应的 ChunkGroup
,前一个 chunkGroup
和后一个 chunkGroup
的关系:
GraphHelpers.connectDependenciesBlockAndChunkGroup(depBlock, depChunkGroup); // ImportDependenciesBlock与chunkGroup建立联系
GraphHelpers.connectChunkGroupParentAndChild(chunkGroup, depChunkGroup); // chunkGroup之间建立联系:_children和_parents
第三阶段
第三阶段主要清理了无用 chunk
并清理相关的联系。
遍历 allCreatedChunkGroups
,allCreatedChunkGroups
即为异步被创建的 ChunkGroup
,判断 chunkGroup
有没有父的 chunkGroup
(_parents
),如果没有执行:
for (const chunk of chunkGroup.chunks) {
const idx = compilation.chunks.indexOf(chunk);
if (idx >= 0) compilation.chunks.splice(idx, 1);
chunk.remove('unconnected');
}
chunkGroup.remove('unconnected');
即解除 module,chunkGroup,chunk
三者之间的联系。
最终每个 module
与每个 chunk
,每个 chunkGroup
和他们之间都建立了联系,优化形成了 chunk Graph
。
seal
里继续执行,先将 compilation.modules
按 index
属性大小排序,然后执行:
this.hooks.afterChunks.call(this.chunks);
触发插件 WebAssemblyModulesPlugin
:设置与 webassembly
相关的报错信息,到此 chunk
生成结束。
module chunk ChunkGroup 区别
module
module
即每一个资源文件的模块对应,如 js / css / 图片
等。由 NormalModule
实例化而来,存于 compilation.modules
。
module.blocks
: 异步模块的依赖module.dependencies
存同步模块的依赖module._chunks
保存module
所属chunk
列表
chunk
chunk
即每一个输出文件的对应,包括入口文件,异步加载文件,优化切割后的文件等等,存于 compilation.chunks
。
chunk._groups
: 保存chunk
所属ChunkGroup
列表chunk._modules
: 由哪些module
组成
ChunkGroup
ChunkGroup
一般包含一个 chunk
(入口 chunk
或异步模块的 chunk
)。entrypoint
就是一个 ChunkGroup
,里包含入口 chunk
。存于 compilation.chunkGroups
。
ChunkGroup.chunks
: 由哪些chunk
组成ChunkGroup._blocks
: 保存异步依赖ImportDependenciesBlock
ChunkGroup._children
: 保存子ChunkGroup
ChunkGroup._parent
: 保存父ChunkGroup
本章小结
- 在
finish
回调中执行的seal
方法里,包含了海量钩子用于我们侵入webpack
的封包阶段; - 在遍历入口文件实例化生成
chunk
时,同时实例化了Entrypoint
等,并建立了入口module
和chunk
,Entrypoint
之间的联系; - 通过
buildChunkGraph
的三个阶段,让所有的module、chunk、chunkGroup
之间都建立了联系,形成了chunk Graph
。 - 最后触发钩子
afterChunks
标志这chunk
生成结束。