--- theme: simplicity-green --- > 本文内容基于`webpack 5.74.0`版本进行分析本文是`webpack5核心流程`解析的一篇文章，共有6篇，使用流程图的形式分析了`webpack5的构建原理`： 1. [「Webpack5源码」make阶段（流程图）分析](https://juejin.cn/post/7233407035773173819) 2. [「Webpack5源码」enhanced-resolve路径解析库源码分析](https://juejin.cn/post/7233765235555221559) 3. [「Webpack5源码」seal阶段（流程图）分析(一)](https://juejin.cn/post/7236010202381189157) 4. [「Webpack5源码」seal阶段分析(二)-SplitChunksPlugin源码](https://juejin.cn/post/7238978524031041595) 5. [「Webpack5源码」seal阶段分析(三)-代码生成&runtime](https://juejin.cn/post/7246372493044465722) 6. [「Webpack5源码」热更新HRM流程浅析](https://juejin.cn/post/7182087193958023226) --- # 前言 1. 由于`webpack5`整体代码过于复杂，为了减少复杂度，本文所有分析将只基于`js`文件类型进行分析，不会对其它类型（`css`、`image`）进行分析，所举的例子也都是基于`js`类型 2. 为了增加可读性，会对源码进行删减、调整顺序、改变的操作，文中所有源码均可视作为伪代码 3. 文章默认读者已经掌握`tapable`、`loader`、`plugin`等基础知识，对文章中出现`asyncQueue`、`tapable`、`loader`、`plugin`相关代码都会直接展示，不会增加过多说明 4. 由于`webpack5`整体代码过于复杂，因此会抽离出核心代码进行分析讲解 > 核心代码是笔者认为核心代码的部分，肯定会造成部分内容（读者也觉得是核心代码）缺失，如果发现缺失部分，请参考其它文章或者私信/评论区告知我 # 文章内容从`编译入口`->`make`->`seal`，然后进行`seal`阶段整体流程的概述（以流程图和简化代码的形式），然后根据流程图抽离出来的核心模块展开具体的分析，在分析`seal`阶段整体流程源码的基础上，着重分析： * `Module`、`Chunk`、`ChunkGroup`、`ChunkGraph`之间的关系 * `seal`阶段与`make`阶段的区别 * `SplitChunksPlugin`的分包规则力求对复杂情况下的`Chunk`构建有一个清晰的了解 # 1.seal阶段流程概述 ## 1.1 编译入口->make->seal ```javascript //node_modules/webpack/lib/webpack.js const webpack = (options, callback) => { const { compiler, watch, watchOptions } = create(options); compiler.run(); return compiler; } // node_modules/webpack/lib/Compiler.js class Compiler { run(callback) { const run = () => { this.compile(onCompiled); } run(); } compile(callback) { const params = this.newCompilationParams(); this.hooks.beforeCompile.callAsync(params, err => { const compilation = this.newCompilation(params); this.hooks.make.callAsync(compilation, err => { compilation.seal(err => { this.hooks.afterCompile.callAsync(compilation, err => { return callback(null, compilation); }); }); }); }); } } ``` 在上一篇文章[「Webpack5源码」make阶段（流程图）分析](https://juejin.cn/post/7233407035773173819)，我们已经详细分析其主要模块的代码逻辑：从`entry`入口文件开始，进行依赖路径的`resolve`，然后使用`loaders`对文件内容进行转化，最终转化为`AST`找到该入口文件的依赖，然后重复路径解析`resolve`->`loaders`对文件内容进行转化->`AST`找到依赖的流程，最终处理完毕后，会触发`compliation.seal()`流程 > 由于掘金限制，只能使用png图片，由于本文源码分析都是基于流程图，如果下面png图片看不清，可以点击查看[make-seal详细版.svg](https://wbccb.github.io/Frontend-Articles/image/make-seal详细版.svg) ![make-seal详细版.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/931ab278d5444b6093917632be15b118~tplv-k3u1fbpfcp-watermark.image?) ## 1.2 seal阶段整体概述 * `create chunks`: 遍历`this.entries`，进行多个`Chunks`的构建，包括入口文件形成`Chunk`、异步依赖形成`Chunk`等等 * `optimize`: 对形成的`Chunk`进行优化，涉及`SplitChunkPlgins`插件 * `code generation`: 根据上面的`Chunk`形成最终的代码，涉及到`runtime`以及各种`module`代码的生成 ```javascript seal(callback) { const chunkGraph = new ChunkGraph( this.moduleGraph, this.outputOptions.hashFunction ); this.chunkGraph = chunkGraph; //... this.logger.time("create chunks"); /** @type {Map} */ for (const [name, { dependencies, includeDependencies, options }] of this.entries) { const chunk = this.addChunk(name); const entrypoint = new Entrypoint(options); //... } //... buildChunkGraph(this, chunkGraphInit); this.logger.timeEnd("create chunks"); this.logger.time("optimize"); //... while (this.hooks.optimizeChunks.call(this.chunks, this.chunkGroups)) { /* empty */ } //... this.logger.timeEnd("optimize"); this.logger.time("code generation"); this.codeGeneration(err => { //... this.logger.timeEnd("code generation"); } } ``` ```javascript const buildChunkGraph = (compilation, inputEntrypointsAndModules) => { // PART ONE logger.time("visitModules"); visitModules(...); logger.timeEnd("visitModules"); // PART TWO logger.time("connectChunkGroups"); connectChunkGroups(...); logger.timeEnd("connectChunkGroups"); for (const [chunkGroup, chunkGroupInfo] of chunkGroupInfoMap) { for (const chunk of chunkGroup.chunks) chunk.runtime = mergeRuntime(chunk.runtime, chunkGroupInfo.runtime); } // Cleanup work logger.time("cleanup"); cleanupUnconnectedGroups(compilation, allCreatedChunkGroups); logger.timeEnd("cleanup"); }; ``` ## 1.3 seal阶段整体流程图 ![seal阶段整体流程图.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/497ca9667c0c4d0d8209862213e89e0f~tplv-k3u1fbpfcp-watermark.image?) ## 1.4 重要概念 ### Dependency & Module 单一文件会先构建出`Dependency`，根据类型的不同，会有不同的`Dependency`，比如`EntryDependency` 不同类型的`Dependency`可以使用不同的`ModuleFactory`来进行`Dependency`->`NormalModule`的转化 > 一个文件形成的`NormalModule`，除了原始源代码之外，还包含许多有意义的信息，例如：使用的`loaders`、它的`dependencies`、它的`exports`等等 > 下图来自[An in-depth perspective on webpack's bundling process](https://indepth.dev/posts/1482/an-in-depth-perspective-on-webpacks-bundling-process) ![重要实体类关系.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/52f3dc0050504591b91ef0413b96ab6e~tplv-k3u1fbpfcp-watermark.image?) ### Chunk & ChunkGroup & EntryPoint `Chunk`封装一个或者多个`Module` `ChunkGroup`由一个或者多个`Chunk`组成，一个`ChunkGroup`可以是其它`ChunkGroup`的`parent`或者`child` `EntryPoint`是入口类型的`ChunkGroup`，包含了入口`Chunk` > 下图来自[An in-depth perspective on webpack's bundling process](https://indepth.dev/posts/1482/an-in-depth-perspective-on-webpacks-bundling-process) ![chunkGroup示例.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4413ec06d7914a84b454f731534a2994~tplv-k3u1fbpfcp-watermark.image?) ### ChunkGraph 管理module、chunk和chunkGroup之间的关系 > 下面的类图没有写全属性，只是写上笔者认为重要的属性，下面两个图只是为了更好理解`ChunkGraph`的作用以及管理逻辑，不是作为概括使用 ![重要实体类.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cf43f175190b4b5c8bdbf8dbc69444e6~tplv-k3u1fbpfcp-watermark.image?) ![ChunkGraph.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/760a49bf79a04e01836c180402cc864d~tplv-k3u1fbpfcp-watermark.image?) # 2.遍历this.entries，创建Chunk和ChunkGroup 1. 进行`new ChunkGraph()`的初始化 2. 遍历`this.entries`集合，根据name进行`addChunk()`创建一个新的`Chunk`，并且创建对应的`new Entrypoint()`，也就是`ChunkGroup` 3. 进行一系列对象的存储：`namedChunkGroups`、`entrypoints`、`chunkGroups`，为后续的逻辑做准备 4. 最后进行chunk和ChunkGroup的关联: `connectChunkGroupAndChunk()` 5. 最后进行`this.entries.dependencies`的遍历，因为一个入口`Chunk`可能存在多个文件，比如`entry: {A: ["1.js", "2.js"]}`，`ChunkA`存在`1.js`和`2.js`，此时的`this.entries.dependencies`就是`1.js`和`2.js` ```javascript seal() { const chunkGraph = new ChunkGraph( this.moduleGraph, this.outputOptions.hashFunction ); this.chunkGraph = chunkGraph; for (const [name, { dependencies, includeDependencies, options }] of this.entries) { // 1.获取chunk对象 const chunk = this.addChunk(name); // 2.根据options创建Entrypoint，entrypoint为chunkGroup对象 const entrypoint = new Entrypoint(options); // 3.多个Map对象的设置 if (!options.dependOn && !options.runtime) { entrypoint.setRuntimeChunk(chunk); // 后面生成runtime代码有用 } entrypoint.setEntrypointChunk(chunk); this.namedChunkGroups.set(name, entrypoint); this.entrypoints.set(name, entrypoint); this.chunkGroups.push(entrypoint); // 4.关联chunkGroup和chunk // const connectChunkGroupAndChunk = (chunkGroup, chunk) => { // if (chunkGroup.pushChunk(chunk)) { // chunk.addGroup(chunkGroup); // } // }; connectChunkGroupAndChunk(entrypoint, chunk); for (const dep of [...this.globalEntry.dependencies, ...dependencies]) { entrypoint.addOrigin(null, { name }, /** @type {any} */(dep).request); const module = this.moduleGraph.getModule(dep); if (module) { chunkGraph.connectChunkAndEntryModule(chunk, module, entrypoint); //... } } } } ``` ## 2.1 this.entries > `this.entries`是什么？在触发`hooks.make.tapAsync()`的分析中，我们知道一开始会传入入口文件`entry`，然后使用`createDependency()`构建`EntryDependency`，然后调用`compilation.addEntry()`开始`make`阶段的执行 ```javascript // node_modules/webpack/lib/EntryPlugin.js apply(compiler) { const { entry, options, context } = this; const dep = EntryPlugin.createDependency(entry, options); compiler.hooks.make.tapAsync("EntryPlugin", (compilation, callback) => { compilation.addEntry(context, dep, options, err => { callback(err); }); }); } static createDependency(entry, options) { const dep = new EntryDependency(entry); // TODO webpack 6 remove string option dep.loc = { name: typeof options === "object" ? options.name : options }; return dep; } ``` 而在`addEntry()`中： * 创建`entryData`数据 * `entryData[target].push(entry)` * `this.entries.set(name, entryData)` 换句话说，`this.entries`存放的就是入口文件类型的`Dependency`数组 ```javascript // node_modules/webpack/lib/Compilation.js addEntry(context, entry, optionsOrName, callback) { this._addEntryItem(context, entry, "dependencies", options, callback); } _addEntryItem(context, entry, target, options, callback) { const { name } = options; let entryData = name !== undefined ? this.entries.get(name) : this.globalEntry; if (entryData === undefined) { entryData = { dependencies: [], includeDependencies: [], options: { name: undefined, ...options } }; entryData[target].push(entry); this.entries.set(name, entryData); } else { entryData[target].push(entry); //... } //... this.addModuleTree(); } ``` 回到文章要分析的`seal`阶段，我们就可以知道，一开始遍历`this.entries`实际就是遍历入口文件，其中`name`是入口文件的名称，`dependencies`就是入口文件类型的`EntryDependency`，总结起来就是： ![entries构建.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/110fbf8bcf6d4a2f9c7a5311fb819044~tplv-k3u1fbpfcp-watermark.image?) 在遍历过程中，我们对每一个入口文件，都调用`addChunk()`进行`Chunk`对象的构建+调用`new Entrypoint()`进行`ChunkGroup`对象的构建，然后使用`connectChunkGroupAndChunk()`建立起`ChunkGroup`和`Chunk`的关联 ```javascript seal() { const chunkGraph = new ChunkGraph( this.moduleGraph, this.outputOptions.hashFunction ); this.chunkGraph = chunkGraph; for (const [name, { dependencies, includeDependencies, options }] of this.entries) { // 1.获取chunk对象 const chunk = this.addChunk(name); // 2.根据options创建Entrypoint，entrypoint为chunkGroup对象 const entrypoint = new Entrypoint(options); // 3.多个Map对象的设置 if (!options.dependOn && !options.runtime) { entrypoint.setRuntimeChunk(chunk); // 后面生成runtime代码有用 } entrypoint.setEntrypointChunk(chunk); this.namedChunkGroups.set(name, entrypoint); this.entrypoints.set(name, entrypoint); this.chunkGroups.push(entrypoint); // 4.关联chunkGroup和chunk // const connectChunkGroupAndChunk = (chunkGroup, chunk) => { // if (chunkGroup.pushChunk(chunk)) { // chunk.addGroup(chunkGroup); // } // }; connectChunkGroupAndChunk(entrypoint, chunk); //... } } addChunk(name) { //name存在namedChunks则返回当前chunk if (name) { const chunk = this.namedChunks.get(name); if (chunk !== undefined) { return chunk; } } //新建chunk实例 const chunk = new Chunk(name, this._backCompat); this.chunks.add(chunk); if (this._backCompat) //添加至ChunkGraphForChunk Map ChunkGraph.setChunkGraphForChunk(chunk, this.chunkGraph); if (name) { //添加至namedChunks Map this.namedChunks.set(name, chunk); } return chunk; } ``` ## 2.2 this.entries.dependencies > 比如`entry: {A: ["1.js", "2.js"]}`，`ChunkA`存在`1.js`和`2.js`，此时的`this.entries.dependencies`就是`1.js`和`2.js` 1. 通过`dep`获取对应的`NormalModule`，即利用`dependency`获取对应的`Module对象` 2. 使用`chunkGraph.connectChunkAndEntryModule()`关联chunk、module和chunkGroup的关系 3. `assignDepths()`方法会遍历入口module所有的依赖，为每一个module设置深度标记 ```javascript seal() { const chunkGraph = new ChunkGraph( this.moduleGraph, this.outputOptions.hashFunction ); this.chunkGraph = chunkGraph; for (const [name, { dependencies, includeDependencies, options }] of this.entries) { // 每一个入口都进行new Chunk()和new ChunkGroup() // 关联chunkGroup和chunk // 关联chunk、module、chunkGroup const entryModules = new Set(); for (const dep of [...this.globalEntry.dependencies, ...dependencies]) { entrypoint.addOrigin(null, { name }, /** @type {any} */(dep).request); const module = this.moduleGraph.getModule(dep); if (module) { // const cgm = this._getChunkGraphModule(module); // const cgc = this._getChunkGraphChunk(chunk); // if (cgm.entryInChunks === undefined) { // cgm.entryInChunks = new Set(); // } // cgm.entryInChunks.add(chunk); // cgc.entryModules.set(module, entrypoint); chunkGraph.connectChunkAndEntryModule(chunk, module, entrypoint); entryModules.add(module); const modulesList = chunkGraphInit.get(entrypoint); if (modulesList === undefined) { chunkGraphInit.set(entrypoint, [module]); } else { modulesList.push(module); } } } // 为module设置深度标记 this.assignDepths(entryModules); } } ``` # 3.buildChunkGraph概述从下面代码可以知道，`buildChunkGraph()`主要分为三个部分： * `visitModules()` * `connectChunkGroups()` * `cleanupUnconnectedGroups` > 由于每一点的逻辑都比较复杂，因此下面我们将针对每一个点进行具体的分析 ```javascript seal(callback) { const chunkGraph = new ChunkGraph( this.moduleGraph, this.outputOptions.hashFunction ); this.chunkGraph = chunkGraph; //... this.logger.time("create chunks"); /** @type {Map} */ for (const [name, { dependencies, includeDependencies, options }] of this.entries) { const chunk = this.addChunk(name); const entrypoint = new Entrypoint(options); //... } //... buildChunkGraph(this, chunkGraphInit); //... } const buildChunkGraph = (compilation, inputEntrypointsAndModules) => { // PART ONE logger.time("visitModules"); visitModules(...); logger.timeEnd("visitModules"); // PART TWO logger.time("connectChunkGroups"); connectChunkGroups(...); logger.timeEnd("connectChunkGroups"); for (const [chunkGroup, chunkGroupInfo] of chunkGroupInfoMap) { for (const chunk of chunkGroup.chunks) chunk.runtime = mergeRuntime(chunk.runtime, chunkGroupInfo.runtime); } // Cleanup work logger.time("cleanup"); cleanupUnconnectedGroups(compilation, allCreatedChunkGroups); logger.timeEnd("cleanup"); }; ``` # 4.buildChunkGraph-1-visitModules 从下面代码块知道，`visitModules`主要分为三个部分： * `inputEntrypointsAndModules`：遍历inputEntrypointsAndModules，初始化chunkGroupInfo * 遍历`chunkGroupsForCombining`：处理chunkGroup有父chunkGroup的情况，将两个chunkGroupInfo进行互相关联 * 处理`queue`数据：两个队列，不断循环处理 ```javascript const visitModules = { for (const [chunkGroup, modules] of inputEntrypointsAndModules) { // 遍历inputEntrypointsAndModules，初始化chunkGroupInfo } for (const chunkGroupInfo of chunkGroupsForCombining) { // 处理chunkGroup有父chunkGroup的情况，将两个chunkGroupInfo进行互相关联 } while (queue.length || queueConnect.size) { processQueue(); // 内层遍历 if (chunkGroupsForCombining.size > 0) { processChunkGroupsForCombining(); } if (queueConnect.size > 0) { processConnectQueue(); if (chunkGroupsForMerging.size > 0) { processChunkGroupsForMerging(); } } if (outdatedChunkGroupInfo.size > 0) { processOutdatedChunkGroupInfo(); } } } ``` ## 4.1 visitModules流程图 > 由于掘金限制，只能使用png图片，由于本文源码分析都是基于流程图，如果下面png图片看不清，可以点击查看[seal流程-visitModules流程.svg](https://wbccb.github.io/Frontend-Articles/image/seal流程-visitModules流程.svg) ![seal流程-visitModules流程.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fce9f763c3da473ea8e2516868fd3a96~tplv-k3u1fbpfcp-watermark.image?) ## 4.2 遍历inputEntrypointsAndModules，初始化chunkGroupInfo 在上面`2.1`的分析中，如下面代码所示，我们会进行`chunkGraphInit`数据结构的初始化，使用`entrypoint`作为key，将对应入口所包含的`Module`都加入到数组中 > 比如`entry: {A: ["1.js", "2.js"]}`，`ChunkA`存在`1.js`和`2.js`，此时的`this.entries.dependencies`就是`1.js`和`2.js`，`chunkGraphInit`根据`entrypoint`创建的数组包含`1.js`和`2.js` ```javascript // node_modules/webpack/lib/Compilation.js for (const [name, { dependencies, includeDependencies, options }] of this .entries) { const chunk = this.addChunk(name); if (options.filename) { chunk.filenameTemplate = options.filename; } const entrypoint = new Entrypoint(options); //... for (const dep of [...this.globalEntry.dependencies, ...dependencies]) { entrypoint.addOrigin(null, { name }, /** @type {any} */(dep).request); const module = this.moduleGraph.getModule(dep); if (module) { chunkGraph.connectChunkAndEntryModule(chunk, module, entrypoint); entryModules.add(module); const modulesList = chunkGraphInit.get(entrypoint); if (modulesList === undefined) { chunkGraphInit.set(entrypoint, [module]); } else { modulesList.push(module); } } } //... } ``` 从下面代码可以知道，我们会遍历所有`inputEntrypointsAndModules`，获取所有入口文件相关的`NormalModule`，然后把它们都加入到`queue`中 > 加入到`queue`之前会判断当前入口文件类型的`chunkGroup`是否具有`parent`，如果有的话，直接放入`chunkGroupsForCombining`，而不放入`queue` ```javascript // 精简代码，只留下要分析的代码 // inputEntrypointsAndModules = { Entrypoint: [NormalModule] } // 由于Entrypoint extends ChunkGroup，因此 // inputEntrypointsAndModules = { ChunkGroup: [NormalModule] } for (const [chunkGroup, modules] of inputEntrypointsAndModules) { const runtime = getEntryRuntime( compilation, chunkGroup.name, chunkGroup.options ); // 为entry创建chunkGroupInfo const chunkGroupInfo = { chunkGroup, runtime, minAvailableModules: undefined, // 可追踪的最小module数量 minAvailableModulesOwned: false, availableModulesToBeMerged: [], skippedItems: undefined, resultingAvailableModules: undefined, children: undefined, availableSources: undefined, availableChildren: undefined }; if (chunkGroup.getNumberOfParents() > 0) { // 如果chunkGroup有父chunkGroup，那么可能父chunkGroup已经在其它地方已经引用它了，需要另外处理 chunkGroupsForCombining.add(chunkGroupInfo); } else { chunkGroupInfo.minAvailableModules = EMPTY_SET; const chunk = chunkGroup.getEntrypointChunk(); for (const module of modules) { queue.push({ action: ADD_AND_ENTER_MODULE, block: module, module, chunk, chunkGroup, chunkGroupInfo }); } } chunkGroupInfoMap.set(chunkGroup, chunkGroupInfo); if (chunkGroup.name) { namedChunkGroups.set(chunkGroup.name, chunkGroupInfo); } } ``` ## 4.3 检测chunkGroupsForCombining，处理EntryPoint有父chunkGroup的情况遍历`chunkGroupsForCombining`，将两个`chunkGroupInfo`进行互相关联，本质就是`availableSources`和`availableChildren`互相添加对方`chunkGroupInfo` ```javascript // 处理chunkGroup有父chunkGroup的情况，将两个chunkGroupInfo进行互相关联 for (const chunkGroupInfo of chunkGroupsForCombining) { const { chunkGroup } = chunkGroupInfo; chunkGroupInfo.availableSources = new Set(); for (const parent of chunkGroup.parentsIterable) { const parentChunkGroupInfo = chunkGroupInfoMap.get(parent); chunkGroupInfo.availableSources.add(parentChunkGroupInfo); if (parentChunkGroupInfo.availableChildren === undefined) { parentChunkGroupInfo.availableChildren = new Set(); } parentChunkGroupInfo.availableChildren.add(chunkGroupInfo); } } ``` ## 4.4 processQueue：处理queue 将所有入口类型的`module`压入`queue`后，赋予初始状态`ADD_AND_ENTER_MODULE`，然后不断变化状态值，调用不同方法进行处理
从下面`processQueue()`可以知道，会执行由于几个状态都不存在`break`语句，因此会执行
`ADD_AND_ENTER_ENTRY_MODULE`->`ADD_AND_ENTER_MODULE`->`ENTER_MODULE`->`PROCESS_BLOCK` ```javascript for (const [chunkGroup, modules] of inputEntrypointsAndModules) { // 为entry创建chunkGroupInfo const chunkGroupInfo = { chunkGroup, runtime, //... }; chunkGroupInfo.minAvailableModules = EMPTY_SET; const chunk = chunkGroup.getEntrypointChunk(); for (const module of modules) { queue.push({ action: ADD_AND_ENTER_MODULE, block: module, module, chunk, chunkGroup, chunkGroupInfo }); } } // 取queue要pop()，为了保证访问顺序，需要反转一下数组 queue.reverse(); const processQueue = () => { while (queue.length) { statProcessedQueueItems++; const queueItem = queue.pop(); module = queueItem.module; block = queueItem.block; chunk = queueItem.chunk; chunkGroup = queueItem.chunkGroup; chunkGroupInfo = queueItem.chunkGroupInfo; switch (queueItem.action) { case ADD_AND_ENTER_ENTRY_MODULE: //... case ADD_AND_ENTER_MODULE: //... case ENTER_MODULE: //... case PROCESS_BLOCK: { processBlock(block); break; } case PROCESS_ENTRY_BLOCK: { processEntryBlock(block); break; } case LEAVE_MODULE: //... } } } ``` > 下面将按照`ADD_AND_ENTER_ENTRY_MODULE`->`ADD_AND_ENTER_MODULE`->`ENTER_MODULE`->`PROCESS_BLOCK`顺序进行讲解 ### 4.4.1 ADD\_AND\_ENTER\_ENTRY\_MODULE 取目前的入口`entryModule`，然后进行`chunk`、`module`、`chunkGroup`的关联 ```javascript switch (queueItem.action) { case ADD_AND_ENTER_ENTRY_MODULE: chunkGraph.connectChunkAndEntryModule( chunk, module, /** @type {Entrypoint} */(chunkGroup) ); } // node_modules/webpack/lib/ChunkGraph.js connectChunkAndEntryModule(chunk, module, entrypoint) { const cgm = this._getChunkGraphModule(module); const cgc = this._getChunkGraphChunk(chunk); if (cgm.entryInChunks === undefined) { cgm.entryInChunks = new Set(); } cgm.entryInChunks.add(chunk); cgc.entryModules.set(module, entrypoint); } ``` ### 4.4.2 ADD\_AND\_ENTER\_MODULE 将`chunk`和`module`进行互相关联 ```javascript switch (queueItem.action) { case ADD_AND_ENTER_ENTRY_MODULE: chunkGraph.connectChunkAndEntryModule( chunk, module, /** @type {Entrypoint} */(chunkGroup) ); // fallthrough case ADD_AND_ENTER_MODULE: { if (chunkGraph.isModuleInChunk(module, chunk)) { // already connected, skip it break; } // We connect Module and Chunk chunkGraph.connectChunkAndModule(chunk, module); } } // node_modules/webpack/lib/ChunkGraph.js connectChunkAndModule(chunk, module) { const cgm = this._getChunkGraphModule(module); const cgc = this._getChunkGraphChunk(chunk); cgm.chunks.add(chunk); cgc.modules.add(module); } isModuleInChunk(module, chunk) { const cgc = this._getChunkGraphChunk(chunk); return cgc.modules.has(module); } ``` ### 4.4.3 ENTER\_MODULE ```javascript switch (queueItem.action) { case ADD_AND_ENTER_ENTRY_MODULE: chunkGraph.connectChunkAndEntryModule( chunk, module, /** @type {Entrypoint} */(chunkGroup) ); // fallthrough case ADD_AND_ENTER_MODULE: { if (chunkGraph.isModuleInChunk(module, chunk)) { // already connected, skip it break; } // We connect Module and Chunk chunkGraph.connectChunkAndModule(chunk, module); } case ENTER_MODULE: { const index = chunkGroup.getModulePreOrderIndex(module); // ...省略设置index的逻辑 queueItem.action = LEAVE_MODULE; queue.push(queueItem); } } ``` ### 4.4.4 PROCESS\_BLOCK `ADD_AND_ENTER_ENTRY_MODULE`->`ADD_AND_ENTER_MODULE`->`ENTER_MODULE`->`PROCESS_BLOCK`，此时会触发`processBlock()`的执行 ```javascript const processQueue = () => { while (queue.length) { statProcessedQueueItems++; const queueItem = queue.pop(); module = queueItem.module; block = queueItem.block; chunk = queueItem.chunk; chunkGroup = queueItem.chunkGroup; chunkGroupInfo = queueItem.chunkGroupInfo; switch (queueItem.action) { case ADD_AND_ENTER_ENTRY_MODULE: //... case ADD_AND_ENTER_MODULE: //... case ENTER_MODULE: //... case PROCESS_BLOCK: { processBlock(block); break; } case PROCESS_ENTRY_BLOCK: { processEntryBlock(block); break; } case LEAVE_MODULE: //... } } } ``` 在`processBlock()`中先触发`getBlockModules()` > 同步依赖的`block`=`module`，异步依赖就传递不同的参数 ```javascript const processBlock = block => { const blockModules = getBlockModules(block, chunkGroupInfo.runtime); } getBlockModules() { //...省略初始化blockModules和blockModulesMap的逻辑 extractBlockModules(module, moduleGraph, runtime, blockModulesMap); blockModules = blockModulesMap.get(block); return blockModules; } const extractBlockModules = (module, moduleGraph, runtime, blockModulesMap) => { //...省略很多条件判断 for (const connection of moduleGraph.getOutgoingConnections(module)) { const m = connection.module; const i = index << 2; modules[i] = m; modules[i + 1] = state; } //...省略处理modules[t]为空的逻辑 //最终返回的就是module所有import的依赖+对应的state的数组 } ``` *** > `moduleGraph.getOutgoingConnections()`是一个看起来非常熟悉的方法，在`make阶段`中我们就遇到过 ```javascript // node_modules/webpack/lib/ModuleGraph.js getOutgoingConnections(module) { const connections = this._getModuleGraphModule(module).outgoingConnections; return connections === undefined ? EMPTY_SET : connections; } ``` 在`make阶段`的`addModule()`方法执行后，我们会执行`moduleGraph.setResolvedModule()`，其中会涉及到`originModule`、`dependency`、`module`等变量 ```javascript // node_modules/webpack/lib/Compilation.js const unsafeCacheableModule = /** @type {Module & { restoreFromUnsafeCache: Function }} */ ( module ); for (let i = 0; i < dependencies.length; i++) { const dependency = dependencies[i]; moduleGraph.setResolvedModule( connectOrigin ? originModule : null, dependency, unsafeCacheableModule ); unsafeCacheDependencies.set(dependency, unsafeCacheableModule); } // node_modules/webpack/lib/ModuleGraph.js setResolvedModule(originModule, dependency, module) { const connection = new ModuleGraphConnection( originModule, dependency, module, undefined, dependency.weak, dependency.getCondition(this) ); const connections = this._getModuleGraphModule(module).incomingConnections; connections.add(connection); if (originModule) { const mgm = this._getModuleGraphModule(originModule); if (mgm._unassignedConnections === undefined) { mgm._unassignedConnections = []; } mgm._unassignedConnections.push(connection); if (mgm.outgoingConnections === undefined) { mgm.outgoingConnections = new SortableSet(); } mgm.outgoingConnections.add(connection); } else { this._dependencyMap.set(dependency, connection); } } ``` * `originModule`: 父Module，比如下面示例中的index.js * `dependency`: 是父Module的依赖集合，比如下面示例中的`"./item/index_item-parent1.js"`，它会在`originModule`中产生4个`dependency` ```javascript // index.js import {getC1} from "./item/index_item-parent1.js"; var test = _.add(6, 4) + getC1(1, 3); var test1 = _.add(6, 4) + getC1(1, 3); var test2 = getC1(4, 5); ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/43d99dad811a4c0ca12df61587c399c5~tplv-k3u1fbpfcp-zoom-1.image) ```javascript sortedDependencies[0] = { dependencies: [ { // HarmonyImportSideEffectDependency request: "./item/index_item-parent1.js", userRequest: "./item/index_item-parent1.js" }, { // HarmonyImportSpecifierDependency name: "getC1", request: "./item/index_item-parent1.js", userRequest: "./item/index_item-parent1.js" } //... ], originModule: { userRequest: "/Users/wcbbcc/blog/Frontend-Articles/webpack-debugger/js/src/index.js", dependencies: [ //...10个依赖，包括上面那两个Dependency ] } } ``` * `module`: 在`make阶段`中，依赖对象dependency会进行handleModuleCreation()，这个时候触发的是`NormalModuleFactory.create()`，会拿出第一个`dependencies[0]`，也就是上面示例中的`HarmonyImportSideEffectDependency`，也就是`import {getC1} from "./item/index_item-parent1.js"`，然后转化为`module` ```javascript // node_modules/webpack/lib/NormalModuleFactory.js create(data, callback) { const dependencies = /** @type {ModuleDependency[]} */ (data.dependencies); const dependency = dependencies[0]; const request = dependency.request; const dependencyType = (dependencies.length > 0 && dependencies[0].category) || ""; const resolveData = { request, dependencies, dependencyType }; // 利用resolveData进行一系列的resolve()和buildModule()操作... } ``` *** 回到`processBlock()`的分析，我们就可以知道，`connection.module`实际就是当前`module`的所有依赖 > 其中要记住的是当前`module`的同步依赖是建立在 `blockModulesMap.set(block, arr)`的arr数组中，此时block是当前module > 而当前`module`的异步依赖会另外起一个数组arr，即使`blockModulesMap.set(block, arr)`的block是当前module的异步依赖 ```javascript const processBlock = block => { const blockModules = getBlockModules(block, chunkGroupInfo.runtime); } getBlockModules() { //...省略初始化blockModules和blockModulesMap的逻辑 extractBlockModules(module, moduleGraph, runtime, blockModulesMap); blockModules = blockModulesMap.get(block); return blockModules; } const extractBlockModules = (module, moduleGraph, runtime, blockModulesMap) => { const queue = [module]; while (queue.length > 0) { const block = queue.pop(); const arr = []; arrays.push(arr); blockModulesMap.set(block, arr); for (const b of block.blocks) { queue.push(b); } } for (const connection of moduleGraph.getOutgoingConnections(module)) { const m = connection.module; const i = index << 2; modules[i] = m; modules[i + 1] = state; } //...省略处理modules去重逻辑 //最终返回的就是module所有import的依赖+对应的state的数组 } ``` 最终`extractBlockModules()`会得到一个依赖数据对象`blockModules`，`getBlockModules()`通过当前`module`获取所有的同步依赖，即下面示例中的`Array(14)`
![截屏2023-05-21 12.41.39.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/46c7d3c6cfc747f793fdacc82bef29fe~tplv-k3u1fbpfcp-zoom-1.image) #### processBlock()-处理同步依赖经过上面的分析，我们通过`getBlockModules()`获取当前block的所有同步依赖后，我们对这些依赖进行遍历 > 同步依赖的`block`=`module`，异步依赖就传递不同的参数，如下面的`queueBuffer`的数据结构，`block`和`module`都是同一个数据`refModule` 主要分为三个方面的处理： * 如果`activeState`不为true，则加入到`skipConnectionBuffer`集合中 * 如果`activeState`为true，但是`minAvailableModules`/`minAvailableModules`已经有该module，也就是parent chunks已经含有该module，则加入到`skipBuffer`集合中 * 如果能够满足上面两个检查，则把当前的module加入到`queueBuffer`中 ```javascript const processBlock = (block, isSrc) => { const blockModules = getBlockModules(block, chunkGroupInfo.runtime); for (let i = 0; i < blockModules.length; i += 2) { const refModule = /** @type {Module} */ (blockModules[i]); if (chunkGraph.isModuleInChunk(refModule, chunk)) { // skip early if already connected continue; } const activeState = /** @type {ConnectionState} */ ( blockModules[i + 1] ); if (activeState !== true) { skipConnectionBuffer.push([refModule, activeState]); if (activeState === false) continue; } if ( activeState === true && (minAvailableModules.has(refModule) || minAvailableModules.plus.has(refModule)) ) { // already in parent chunks, skip it for now skipBuffer.push(refModule); continue; } // enqueue, then add and enter to be in the correct order // this is relevant with circular dependencies queueBuffer.push({ action: activeState === true ? ADD_AND_ENTER_MODULE : PROCESS_BLOCK, block: refModule, module: refModule, chunk, chunkGroup, chunkGroupInfo }); } // 处理skipConnectionBuffer // 处理skipBuffer // 处理queueBuffer } ``` > 由于三段逻辑比较明显和分散，我们可以把它们合在一起如果`activeState`不为true，则将当前同步依赖加入到`skipConnectionBuffer`集合中，然后放入到当前module的`chunkGroupInfo.skippedModuleConnections`中 ```javascript for (let i = 0; i < blockModules.length; i += 2) { const activeState = /** @type {ConnectionState} */ ( blockModules[i + 1] ); if (activeState !== true) { skipConnectionBuffer.push([refModule, activeState]); if (activeState === false) continue; } } if (skipConnectionBuffer.length > 0) { let { skippedModuleConnections } = chunkGroupInfo; if (skippedModuleConnections === undefined) { chunkGroupInfo.skippedModuleConnections = skippedModuleConnections = new Set(); } for (let i = skipConnectionBuffer.length - 1; i >= 0; i--) { skippedModuleConnections.add(skipConnectionBuffer[i]); } skipConnectionBuffer.length = 0; } ``` 如果`activeState`为true，但是`minAvailableModules`/`minAvailableModules`已经有该module，也就是parent chunks已经含有该module，则加入到`skipBuffer`集合中，然后放入到当前module的`chunkGroupInfo.skippedItems`中 ```javascript for (let i = 0; i < blockModules.length; i += 2) { const activeState = /** @type {ConnectionState} */ ( blockModules[i + 1] ); if ( activeState === true && (minAvailableModules.has(refModule) || minAvailableModules.plus.has(refModule)) ) { // already in parent chunks, skip it for now skipBuffer.push(refModule); continue; } } if (skipBuffer.length > 0) { let {skippedItems} = chunkGroupInfo; if (skippedItems === undefined) { chunkGroupInfo.skippedItems = skippedItems = new Set(); } for (let i = skipBuffer.length - 1; i >= 0; i--) { skippedItems.add(skipBuffer[i]); } skipBuffer.length = 0; } ``` 如果能够满足上面两个检查，则把当前的module的同步依赖加入到`queueBuffer`中，然后加入到`queue`，继续在内层循环中处理同步依赖 ```javascript for (let i = 0; i < blockModules.length; i += 2) { const activeState = /** @type {ConnectionState} */ ( blockModules[i + 1] ); queueBuffer.push({ action: activeState === true ? ADD_AND_ENTER_MODULE : PROCESS_BLOCK, block: refModule, module: refModule, chunk, chunkGroup, chunkGroupInfo }); } if (queueBuffer.length > 0) { for (let i = queueBuffer.length - 1; i >= 0; i--) { queue.push(queueBuffer[i]); } queueBuffer.length = 0; } ``` #### processBlock()-处理异步依赖处理完成同步依赖后，会触发`iteratorBlock(b)`处理当前module的异步依赖
从下面的代码块分析可以知道，主要分为3种情况 * 情况1: 这个异步依赖NormalModule还没有对应的chunkGroup * 场景1: `Entry`类型，压入`queueDelayed`，状态置为`PROCESS_ENTRY_BLOCK`，构件新的`Chunk` * 场景2: `webpack.config.js`中`asyncChunks=false`/`chunkLoading=false`，还是使用目前的`Chunk`，与同步依赖集成在同一文件中 * 场景3: `非Entry`+`允许asyncChunk`的情况，使用`addChunkInGroup()`建立新的`ChunkGroup`和新的`Chunk`，形成新的文件存放该异步依赖 * 情况2: 这个异步依赖NormalModule有对应的chunkGroup，而且它是入口类型的 * 情况3: 这个异步依赖NormalModule有对应的chunkGroup，而且它不是入口类型的最后再进行Entry类型和非Entry类型的分开处理 ```javascript const processBlock = (block, isSrc) => { //...处理同步依赖 for (const b of block.blocks) { iteratorBlock(b); } } const iteratorBlock = b => { let cgi = blockChunkGroups.get(b); const entryOptions = b.groupOptions && b.groupOptions.entryOptions; if (cgi === undefined) { // 情况1: 这个异步NormalModule还没有对应的chunkGroup if (entryOptions) { // 场景1: Entry类型 queueDelayed.push({ action: PROCESS_ENTRY_BLOCK, block: b, module: module, chunk: entrypoint.chunks[0], chunkGroup: entrypoint, chunkGroupInfo: cgi }); } else if (!chunkGroupInfo.asyncChunks || !chunkGroupInfo.chunkLoading) { // 场景2: webpack.config.js中asyncChunks=false/chunkLoading=false queue.push({ action: PROCESS_BLOCK, block: b, module: module, chunk, chunkGroup, chunkGroupInfo }); } else { // 场景3: 非Entry+允许asyncChunk的情况 c = compilation.addChunkInGroup( b.groupOptions || b.chunkName, module, b.loc, b.request ); blockConnections.set(b, []); } } else if (entryOptions) { // 情况2: 这个异步NormalModule有对应的chunkGroup，而且它是入口类型的 entrypoint = cgi.chunkGroup; } else { // 情况3: 这个异步NormalModule有对应的chunkGroup，而且它不是入口类型的 c = cgi.chunkGroup; } if (c !== undefined) { // 处理不是Entry类型 } else if (entrypoint !== undefined) { // 处理Entry类型 chunkGroupInfo.chunkGroup.addAsyncEntrypoint(entrypoint); } } ``` ##### 处理不是Entry类型：queueConnection的构建当`c !== undefined`时，该异步依赖不是`Entry`类型，将它放入到`queueConnection`中
然后把当前异步依赖也放入`queueDelayed`数组中，等待下一次处理，此时我们要注意，`chunkGroup`已经变为`c`，此时的`c`有可能是异步依赖建立的新的`ChunkGroup` ```javascript if (c !== undefined) { blockConnections.get(b).push({ originChunkGroupInfo: chunkGroupInfo, chunkGroup: c }); let connectList = queueConnect.get(chunkGroupInfo); if (connectList === undefined) { connectList = new Set(); queueConnect.set(chunkGroupInfo, connectList); } connectList.add(cgi); // TODO check if this really need to be done for each traversal // or if it is enough when it's queued when created // 4. We enqueue the DependenciesBlock for traversal queueDelayed.push({ action: PROCESS_BLOCK, block: b, module: module, chunk: c.chunks[0], chunkGroup: c, chunkGroupInfo: cgi }); } ``` #### processBlock()-处理异步依赖的异步依赖存储在`blocksWithNestedBlocks`这个`Set`数据结构中，等到下一个阶段进行处理 ```javascript const processBlock = (block, isSrc) => { //...处理同步依赖 // 处理异步依赖 for (const b of block.blocks) { iteratorBlock(b); } if (block.blocks.length > 0 && module !== block) { blocksWithNestedBlocks.add(block); } } ``` > 在上面的分析中，我们知道当异步依赖是`entry`类型时，我们会将它加入到`queueDelayed`，并且状态置为`PROCESS_ENTRY_BLOCK`，那么这个状态执行了什么逻辑呢？ ### 4.4.5 PROCESS\_ENTRY\_BLOCK 从下面代码可以看出，`processEntryBlock()`跟`processBlock()`的整体逻辑是一样的，都是遍历所有同步依赖`blockModules`，然后压入到`queueBuffer`中，然后处理异步依赖，然后处理异步依赖的异步依赖 ```javascript const processEntryBlock = block => { const blockModules = getBlockModules(block, chunkGroupInfo.runtime); for (let i = 0; i < blockModules.length; i += 2) { const refModule = /** @type {Module} */ (blockModules[i]); const activeState = /** @type {ConnectionState} */ ( blockModules[i + 1] ); queueBuffer.push({ action: activeState === true ? ADD_AND_ENTER_ENTRY_MODULE : PROCESS_BLOCK, block: refModule, module: refModule, chunk, chunkGroup, chunkGroupInfo }); } if (queueBuffer.length > 0) { for (let i = queueBuffer.length - 1; i >= 0; i--) { queue.push(queueBuffer[i]); } queueBuffer.length = 0; } for (const b of block.blocks) { iteratorBlock(b); } if (block.blocks.length > 0 && module !== block) { blocksWithNestedBlocks.add(block); } } ``` ### 4.4.6 LEAVE\_MODULE 最后一个状态，设置`index`，没有什么特别的逻辑 ```javascript const processQueue = () => { while (queue.length) { statProcessedQueueItems++; const queueItem = queue.pop(); module = queueItem.module; block = queueItem.block; chunk = queueItem.chunk; chunkGroup = queueItem.chunkGroup; chunkGroupInfo = queueItem.chunkGroupInfo; switch (queueItem.action) { case ADD_AND_ENTER_ENTRY_MODULE: //... case ADD_AND_ENTER_MODULE: //... case ENTER_MODULE: //... case PROCESS_BLOCK: { processBlock(block); break; } case PROCESS_ENTRY_BLOCK: { processEntryBlock(block); break; } case LEAVE_MODULE: const index = chunkGroup.getModulePostOrderIndex(module); if (index === undefined) { chunkGroup.setModulePostOrderIndex( module, chunkGroupInfo.postOrderIndex++ ); } if ( moduleGraph.setPostOrderIndexIfUnset( module, nextFreeModulePostOrderIndex ) ) { nextFreeModulePostOrderIndex++; } break; } } } ``` ### 4.4.7 总结 1. 处理同步的依赖->将异步依赖加入队列中->将异步依赖的异步依赖放入到Set()中 2. `queue`->`queueBuffer`(`ADD_AND_ENTER_MODULE`)->`queueDelayed`(`PROCESS_ENTRY_BLOCK`或者`PROCESS_BLOCK`) ## 4.5 处理chunkGroupsForCombining，即chunkGroup有父chunkGroup的情况 > chunkGroupsForCombining数据是在哪里添加的？数据结构是怎样的？最后是如何处理的？在上面`visitModules()`的分析中，会进行`inputEntrypointsAndModules`遍历，然后选择压入`queue`处理或者压入`chunkGroupsForCombining`处理，而这些数据，会等到一轮`queue`处理完毕后再进行处理 ```javascript if (chunkGroup.getNumberOfParents() > 0) { // minAvailableModules for child entrypoints are unknown yet, set to undefined. // This means no module is added until other sets are merged into // this minAvailableModules (by the parent entrypoints) const skippedItems = new Set(); for (const module of modules) { skippedItems.add(module); } chunkGroupInfo.skippedItems = skippedItems; chunkGroupsForCombining.add(chunkGroupInfo); } else { for (const module of modules) { queue.push({ action: ADD_AND_ENTER_MODULE, block: module, module, chunk, chunkGroup, chunkGroupInfo }); } } for (const chunkGroupInfo of chunkGroupsForCombining) { const { chunkGroup } = chunkGroupInfo; chunkGroupInfo.availableSources = new Set(); for (const parent of chunkGroup.parentsIterable) { const parentChunkGroupInfo = chunkGroupInfoMap.get(parent); chunkGroupInfo.availableSources.add(parentChunkGroupInfo); if (parentChunkGroupInfo.availableChildren === undefined) { parentChunkGroupInfo.availableChildren = new Set(); } parentChunkGroupInfo.availableChildren.add(chunkGroupInfo); } } ``` 在`processQueue()`的内层循环结束时，我们会进行`chunkGroupsForCombining`数据的统一处理 > 每一次遍历完queue，都会触发一次`chunkGroupsForCombining.size`的检测 ```javascript while (queue.length || queueConnect.size) { processQueue(); if (chunkGroupsForCombining.size > 0) { processChunkGroupsForCombining(); } //... if (queue.length === 0) { const tempQueue = queue; queue = queueDelayed.reverse(); queueDelayed = tempQueue; } } ``` `processChunkGroupsForCombining()`具体逻辑如下所示，涉及到一个比较难懂的方法: `calculateResultingAvailableModules()`，我们暂时理解为它可以计算出当前`Chunk`的可复用的最小模块，可以使用一个示例简单理解可复用的最小模块： * 目前`parentModule`为`entry.js`，它有同步依赖`a.js`、`b.js`、`c.js`，异步依赖`async_B.js` * 目前异步依赖`async_B.js`可以形成新的`Chunk`和`ChunkGroup`，它有同步依赖`a.js`、`b.js` * 由于异步依赖`async_B.js`的加载时间肯定慢于`parentModule`的同步依赖，因此异步依赖`async_B.js`可以直接复用`parentModule`的同步依赖`a.js`、`b.js`，而不用把`a.js`、`b.js`打包进去自己的`Chunk` 而`ChunkGroupInfo.minAvailableModules`就是`a.js`、`b.js`的`NormalModule`集合理清楚`minAvailableModules`的概念后，我们就可以对下面代码进行分析： * 遍历当前`ChunkGroupInfo`的所有`parent ChunkGroupInfo`，即`info.availableSources`，然后计算出它们的`resultingAvailableModules`可复用的模块，然后不断合并到当前`ChunkGroupInfo`的`availableModules`属性中 * 最终进行`ChunkGroupInfo.minAvailableModules`的赋值 * 最终`outdatedChunkGroupInfo`添加目前的`ChunkGroupInfo` ```javascript const processChunkGroupsForCombining = () => { for (const info of chunkGroupsForCombining) { for (const source of info.availableSources) { if (!source.minAvailableModules) { chunkGroupsForCombining.delete(info); break; } } } for (const info of chunkGroupsForCombining) { const availableModules = /** @type {ModuleSetPlus} */ (new Set()); availableModules.plus = EMPTY_SET; const mergeSet = set => { if (set.size > availableModules.plus.size) { for (const item of availableModules.plus) availableModules.add(item); availableModules.plus = set; } else { for (const item of set) availableModules.add(item); } }; // combine minAvailableModules from all resultingAvailableModules for (const source of info.availableSources) { const resultingAvailableModules = calculateResultingAvailableModules(source); mergeSet(resultingAvailableModules); mergeSet(resultingAvailableModules.plus); } info.minAvailableModules = availableModules; info.minAvailableModulesOwned = false; info.resultingAvailableModules = undefined; outdatedChunkGroupInfo.add(info); } chunkGroupsForCombining.clear(); }; ``` ## 4.6 处理queueConnect和chunkGroupsForMerging > queueConnect数据是在哪里添加的？数据结构是如何？最后是如何处理queueConnect这种数据的？ ### 4.6.1 queueConnect数据添加在上面的分析中，我们可以知道，处理`NormalModule`的异步依赖时，我们会触发`iteratorBlock()`方法
在`iteratorBlock()`中，我们会将异步依赖新创建的`ChunkGroup`加入到`queueConnect`中，然后将目前的异步依赖的`action`置为`PROCESS_BLOCK`，重新进行`processBlock`的同步依赖和异步依赖的处理如下面代码块所示，`c`实际上是一个非入口类型的`chunkGroup`
`queueConnect`存储的是： * `key`: 当前`ChunkGroupInfo` * `value`: 非入口类型创建的新`chunkGroup`集合数组 ```javascript // 处理NormalModule的异步依赖b const iteratorBlock = b => { // 如果c之前不存在，需要重新建立，这里只是为了更好理解而摘出这部分代码 c = compilation.addChunkInGroup( b.groupOptions || b.chunkName, module, b.loc, b.request ); c.index = nextChunkGroupIndex++; if (c !== undefined) { // b为非入口的异步依赖 blockConnections.get(b).push({ originChunkGroupInfo: chunkGroupInfo, chunkGroup: c }); let connectList = queueConnect.get(chunkGroupInfo); if (connectList === undefined) { connectList = new Set(); queueConnect.set(chunkGroupInfo, connectList); } connectList.add(cgi); queueDelayed.push({ action: PROCESS_BLOCK, block: b, module: module, chunk: c.chunks[0], chunkGroup: c, chunkGroupInfo: cgi }); } else if (entrypoint !== undefined) { chunkGroupInfo.chunkGroup.addAsyncEntrypoint(entrypoint); } } ``` ### 4.6.2 处理queueConnect数据在`iteratorBlock()`中进行`queueConnect`数据的构建后
在`processQueue()`的内层循环结束时，我们会进行`queueConnect`数据的统一处理 > 每一次遍历完queue，都会触发一次`queueConnect.size`的检测 ```javascript while (queue.length || queueConnect.size) { processQueue(); if (chunkGroupsForCombining.size > 0) { processChunkGroupsForCombining(); } if (queueConnect.size > 0) { // calculating available modules processConnectQueue(); if (chunkGroupsForMerging.size > 0) { // merging available modules processChunkGroupsForMerging(); } } //... if (queue.length === 0) { const tempQueue = queue; queue = queueDelayed.reverse(); queueDelayed = tempQueue; } } ``` `processConnectQueue()`处理当前`ChunkGroupInfo`的异步依赖，此时 * `chunkGroupInfo`: 当前的`ChunkGroupInfo` * `targets`：当前的`ChunkGroupInfo`的异步依赖中非入口类型新建的`ChunkGroup`集合数组下面代码整体流程可以概括为： * 先将非入口类型异步依赖新建的`ChunkGroup`都加入到当前的`ChunkGroupInfo.children`中 * 计算出当前的`ChunkGroupInfo`最小可复用的module集合数据，然后添加到新建的`ChunkGroup.availableModulesToBeMerged`属性中 * 将非入口类型异步依赖新建的`ChunkGroup`都加入到`chunkGroupsForMerging`集合中，准备下一个阶段 ```javascript const processConnectQueue = () => { // 处理异步依赖创建的之间的关联 for (const [chunkGroupInfo, targets] of queueConnect) { // 1. Add new targets to the list of children for (const target of targets) { chunkGroupInfo.children.add(target); } // 2. Calculate resulting available modules const resultingAvailableModules = calculateResultingAvailableModules(chunkGroupInfo); const runtime = chunkGroupInfo.runtime; // 3. Update chunk group info for (const target of targets) { target.availableModulesToBeMerged.push(resultingAvailableModules); chunkGroupsForMerging.add(target); const oldRuntime = target.runtime; const newRuntime = mergeRuntime(oldRuntime, runtime); if (oldRuntime !== newRuntime) { target.runtime = newRuntime; outdatedChunkGroupInfo.add(target); } } statConnectedChunkGroups += targets.size; } queueConnect.clear(); }; ``` ### 4.6.3 处理chunkGroupsForMerging数据在上面调用`processConnectQueue()`处理完成`queueConnect`数据后，会触发`processChunkGroupsForMerging()`处理`chunkGroupsForMergings`数据 ```javascript while (queue.length || queueConnect.size) { processQueue(); if (chunkGroupsForCombining.size > 0) { processChunkGroupsForCombining(); } if (queueConnect.size > 0) { // calculating available modules processConnectQueue(); if (chunkGroupsForMerging.size > 0) { // merging available modules processChunkGroupsForMerging(); } } //... if (queue.length === 0) { const tempQueue = queue; queue = queueDelayed.reverse(); queueDelayed = tempQueue; } } ``` > 注：由于`processChunkGroupsForMerging()`代码量过多，因此为了简化处理，将使用一个示例讲解该方法，并且只保留示例会运行的条件代码 > 由于掘金限制，只能使用png图片，由于本文源码分析都是基于流程图，如果下面png图片看不清，可以点击查看[处理chunkGroupsForMerging数据.svg](https://wbccb.github.io/Frontend-Articles/image/处理chunkGroupsForMerging数据.svg) ![处理chunkGroupsForMerging数据.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8cab1fa58c874ca49bacbcc016193990~tplv-k3u1fbpfcp-watermark.image?) 如上图所示，有两个入口会同时持有异步依赖`async_B.js`，在上面`processConnectQueue()`的分析中，我们可以知道，使用`calculateResultingAvailableModules()`可以计算出`resultingAvailableModules`为： * `entry1.js`：`['./src/entry1.js', './item/entry1_a.js', './item/entry1_b.js', './item/common_____g.js']` * `entry2.js`：`['./src/entry2.js', './item/entry1_b.js', './item/entry2_aa', './item/common_____g.js']` 然后触发`target.availableModulesToBeMerged.push(resultingAvailableModules)`，会将上面得到的两个数组放入到`ChunkGroupInfo.availableModulesToBeMerged`数据中，最终这些数据会带到`processChunkGroupsForMerging()`中如下面`processChunkGroupsForMerging()`所示，一开始由于`cachedMinAvailableModules`为空，会先赋值一个`resultingAvailableModules`给`cachedMinAvailableModules`，然后再开始比较计算并集如下面代码注释所示，计算并集的逻辑其实也不难懂，先拿出`cachedMinAvailableModules[i]`，然后比对`availableModules`有没有包含这个数据，如果没有，则说明得计算并集，最终触发`outdatedChunkGroupInfo.add(info)`，进行下一个阶段的处理 > 为什么要计算并集其实也很好理解，如我们上面所分析那样 > > `entry1.js`可以为`async_B.js`一些复用的module，`entry2.js`可以为`async_B.js`一些复用的module > > 程序会先加载同步依赖（即复用的module），再加载`async_B.js` > > 那么如果`async_B.js`内部自己也import这些复用的module作为同步依赖，那么就不用把这些可复用的module打包进去`async_B.js`所形成的`Chunk`了，因为可以直接使用`Parent Chunk`的同步依赖 > > 但是`entry1.js`和`entry2.js`可以提供复用的module有一些是不一样的怎么办？ > > 比如`entry1.js`可以提供a、b、c，`entry2.js`可以提供b、c、d、e，`async_B.js`需要的同步依赖是a、c > > 由于不清楚是先加载哪个入口文件，因此只能计算`entry1.js`和`entry2.js`提供复用的module的并集，也就是b、c > > 因此`async_B.js`如果需要b、c，那就不用额外打包了，直接复用即可，但是实际`async_B.js`需要的同步依赖是a、c，因此`async_B.js`还得把a打包进去 ```javascript const processChunkGroupsForMerging = () => { for (const info of chunkGroupsForMerging) { const availableModulesToBeMerged = info.availableModulesToBeMerged; let cachedMinAvailableModules = info.minAvailableModules; if (availableModulesToBeMerged.length > 1) { availableModulesToBeMerged.sort(bySetSize); } let changed = false; merge: for (const availableModules of availableModulesToBeMerged) { if (cachedMinAvailableModules === undefined) { cachedMinAvailableModules = availableModules; info.minAvailableModules = cachedMinAvailableModules; info.minAvailableModulesOwned = false; changed = true; } else { if (info.minAvailableModulesOwned) { //... } else if (cachedMinAvailableModules.plus === availableModules.plus) { //... // ！！！计算并集 for (const m of cachedMinAvailableModules) { if (!availableModules.has(m)) { const newSet = /** @type {ModuleSetPlus} */ (new Set()); newSet.plus = availableModules.plus; const iterator = cachedMinAvailableModules[Symbol.iterator](); let it; while (!(it = iterator.next()).done) { const module = it.value; if (module === m) break; newSet.add(module); } while (!(it = iterator.next()).done) { const module = it.value; if (availableModules.has(module)) { newSet.add(module); } } info.minAvailableModulesOwned = true; info.minAvailableModules = newSet; changed = true; continue merge; } } } else { //... } } } if (changed) { info.resultingAvailableModules = undefined; outdatedChunkGroupInfo.add(info); } } chunkGroupsForMerging.clear(); }; ``` ## 4.7 处理outdatedChunkGroupInfo 在经历`processQueue()`->`processConnectQueue()`->`processChunkGroupsForMerging()`的处理后，最终到`processOutdatedChunkGroupInfo()`的执行 ```javascript while (queue.length || queueConnect.size) { processQueue(); if (chunkGroupsForCombining.size > 0) { processChunkGroupsForCombining(); } if (queueConnect.size > 0) { // calculating available modules processConnectQueue(); if (chunkGroupsForMerging.size > 0) { // merging available modules processChunkGroupsForMerging(); } } if (outdatedChunkGroupInfo.size > 0) { // check modules for revisit processOutdatedChunkGroupInfo(); } if (queue.length === 0) { const tempQueue = queue; queue = queueDelayed.reverse(); queueDelayed = tempQueue; } } ``` `processOutdatedChunkGroupInfo()`的代码也很多，但是逻辑是比较清晰易懂的，如下面所示，分为4个部分，由于当前异步依赖`ChunkGroupInfo`的`minAvailableModules`发生了变化，导致之前处理的一些逻辑都得重新检查一遍，主要包括： * `skippedItems`: 之前由于检测到`minAvailableModules`包含当前module，即`Parent Chunks`可以提供当前module进行复用，因此没有加入到`queue`中进行处理，现在重新检测了下，这些跳过的module是否还在`minAvailableModules`中，如果没有，则需要重新加入队列中进行处理 * `skippedModuleConnections`：之前因为检测到`activeState`不为true，因此加入到`skippedModuleConnections`，现在重新检测下状态是否发生改变，如果发生改变，则需要重新加入队列中进行处理 * `children chunk groups`：重新将`children chunk`加入到`queueConnect`中，也就是需要计算下异步依赖的`minAvailableModules`，因为异步依赖的`minAvailableModules`是依托于`parent chunk`，现在`parent chunk`的`minAvailableModules`发生改变，对应的异步依赖也同样需要重新计算下`minAvailableModules` * `availableChildren`: 拿出当前`ChunkGroup`的子`ChunkGroup`，将`children`都重新加入到`chunkGroupsForCombining`重新计算下`minAvailableModules` ```javascript const processOutdatedChunkGroupInfo = () => { statChunkGroupInfoUpdated += outdatedChunkGroupInfo.size; // Revisit skipped elements for (const info of outdatedChunkGroupInfo) { // 1. Reconsider skipped items if (info.skippedItems !== undefined) { const { minAvailableModules } = info; for (const module of info.skippedItems) { if ( !minAvailableModules.has(module) && !minAvailableModules.plus.has(module) ) { queue.push({ action: ADD_AND_ENTER_MODULE, block: module, module, chunk: info.chunkGroup.chunks[0], chunkGroup: info.chunkGroup, chunkGroupInfo: info }); info.skippedItems.delete(module); } } } // 2. Reconsider skipped connections if (info.skippedModuleConnections !== undefined) { const { minAvailableModules } = info; for (const entry of info.skippedModuleConnections) { const [module, activeState] = entry; if (activeState === false) continue; if (activeState === true) { info.skippedModuleConnections.delete(entry); } if ( activeState === true && (minAvailableModules.has(module) || minAvailableModules.plus.has(module)) ) { info.skippedItems.add(module); continue; } queue.push({ action: activeState === true ? ADD_AND_ENTER_MODULE : PROCESS_BLOCK, block: module, module, chunk: info.chunkGroup.chunks[0], chunkGroup: info.chunkGroup, chunkGroupInfo: info }); } } // 2. Reconsider children chunk groups if (info.children !== undefined) { statChildChunkGroupsReconnected += info.children.size; for (const cgi of info.children) { let connectList = queueConnect.get(info); if (connectList === undefined) { connectList = new Set(); queueConnect.set(info, connectList); } connectList.add(cgi); } } // 3. Reconsider chunk groups for combining if (info.availableChildren !== undefined) { for (const cgi of info.availableChildren) { chunkGroupsForCombining.add(cgi); } } } outdatedChunkGroupInfo.clear(); }; ``` ## 4.8 calculateResultingAvailableModules详解 ### 4.8.1 源码分析在上面的流程中，我们多次使用到`calculateResultingAvailableModules()`这个方法，它本身的代码量也很少，逻辑方面也非常直白，主要是两个公式的计算，主要是minAvailableModules和minAvailableModules.plus的比较
resultingAvailableModules分为两个部分 * resultingAvailableModules = new Set()：modules of chunk * resultingAvailableModules.plus = new Set()：比较minAvailableModules/minAvailableModules.plus 当minAvailableModules的长度<=minAvailableModules.plus的长度时，维持plus不变，将`minAvailableModules`并入到`resultingAvailableModules`中
当minAvailableModules的长度>minAvailableModules.plus的长度，此时plus需要扩充，将`minAvailableModules`并入到`resultingAvailableModules.plus`中
因此最终的结果就是 * resultingAvailableModules = (modules of chunk) + (minAvailableModules + minAvailableModules.plus) * resultingAvailableModules = (minAvailableModules + modules of chunk) + (minAvailableModules.plus) 唯一区别就是minAvailableModules到底是放在resultingAvailableModules还是resultingAvailableModules.plus ```javascript const calculateResultingAvailableModules = chunkGroupInfo => { if (chunkGroupInfo.resultingAvailableModules) return chunkGroupInfo.resultingAvailableModules; const minAvailableModules = chunkGroupInfo.minAvailableModules; // Create a new Set of available modules at this point // We want to be as lazy as possible. There are multiple ways doing this: // Note that resultingAvailableModules is stored as "(a) + (b)" as it's a ModuleSetPlus // - resultingAvailableModules = (modules of chunk) + (minAvailableModules + minAvailableModules.plus) // - resultingAvailableModules = (minAvailableModules + modules of chunk) + (minAvailableModules.plus) // We choose one depending on the size of minAvailableModules vs minAvailableModules.plus let resultingAvailableModules; if (minAvailableModules.size > minAvailableModules.plus.size) { // resultingAvailableModules = (modules of chunk) + (minAvailableModules + minAvailableModules.plus) resultingAvailableModules = /** @type {Set & {plus: Set}} */ (new Set()); for (const module of minAvailableModules.plus) minAvailableModules.add(module); minAvailableModules.plus = EMPTY_SET; resultingAvailableModules.plus = minAvailableModules; chunkGroupInfo.minAvailableModulesOwned = false; } else { // resultingAvailableModules = (minAvailableModules + modules of chunk) + (minAvailableModules.plus) resultingAvailableModules = /** @type {Set & {plus: Set}} */ ( new Set(minAvailableModules) ); resultingAvailableModules.plus = minAvailableModules.plus; } // add the modules from the chunk group to the set for (const chunk of chunkGroupInfo.chunkGroup.chunks) { for (const m of chunkGraph.getChunkModulesIterable(chunk)) { resultingAvailableModules.add(m); } } return (chunkGroupInfo.resultingAvailableModules = resultingAvailableModules); } ``` ### 4.8.2 示例图解 > 由于掘金限制，只能使用png图片，由于本文源码分析都是基于流程图，如果下面png图片看不清，可以点击查看[calculateResultingAvailableModules.svg](https://wbccb.github.io/Frontend-Articles/image/calculateResultingAvailableModules.svg) ![calculateResultingAvailableModules.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c11e0ef9955494ab0050d7fe73dc31e~tplv-k3u1fbpfcp-watermark.image?) # 5.buildChunkGraph-2-connectChunkGroups ## 5.1 blockConnections数据收集 `blockConnections`数据在`iteratorBlock()`处理异步依赖时初始化 > ##### 处理不是Entry类型：queueConnection的构建 ```javascript const processBlock = (block, isSrc) => { //...处理同步依赖 for (const b of block.blocks) { iteratorBlock(b); } } const iteratorBlock = b => { if (c !== undefined) { blockConnections.get(b).push({ originChunkGroupInfo: chunkGroupInfo, chunkGroup: c }); let connectList = queueConnect.get(chunkGroupInfo); if (connectList === undefined) { connectList = new Set(); queueConnect.set(chunkGroupInfo, connectList); } connectList.add(cgi); // TODO check if this really need to be done for each traversal // or if it is enough when it's queued when created // 4. We enqueue the DependenciesBlock for traversal queueDelayed.push({ action: PROCESS_BLOCK, block: b, module: module, chunk: c.chunks[0], chunkGroup: c, chunkGroupInfo: cgi }); } } ``` ## 5.2 处理blockConnections数据，绑定ChunkGroup 如下面代码块所示，`areModulesAvailable()`主要是判断该异步的`chunkGroup`所有的依赖是否都处于`parent chunkGroup`的`resultingAvailableModules`中，也就是`parent chunkGroup`的一些同步依赖已经包含了异步依赖所需要的所有`modules` > 异步依赖直接拿`parent chunkGroup`的同步依赖即可，不需要跟其他`module`建立关系 `connectBlockAndChunkGroup()`: 异步依赖AsyncDependenciesBlock跟新建立的ChunkGroup进行绑定
`connectChunkGroupParentAndChild()`: 异步依赖ChunkGroup跟其parent ChunkGroup进行绑定 ```javascript const connectChunkGroups = (compilation, blocksWithNestedBlocks, blockConnections, chunkGroupInfoMap) => { const { chunkGraph } = compilation; // 出现在父chunkA有异步依赖chunkB，chunkB有同步依赖chunkC // 但是chunkC是chunkA的同步依赖，那么chunkB就跳过这个异步chunkC的关联 for (const [block, connections] of blockConnections) { if ( !blocksWithNestedBlocks.has(block) && connections.every(({ chunkGroup, originChunkGroupInfo }) => // originChunkGroupInfo包含了这个chunkGroup的所有Modules //说明异步依赖block所在的chunk已经被所在的chunk的父chunk包含了 areModulesAvailable( chunkGroup, originChunkGroupInfo.resultingAvailableModules ) ) ) { continue; } for (let i = 0; i < connections.length; i++) { const { chunkGroup, originChunkGroupInfo } = connections[i]; // 关联这个AsyncDependenciesBlock和chunkGroup chunkGraph.connectBlockAndChunkGroup(block, chunkGroup); // 关联这个chunkGroup和它的父chunkGroup connectChunkGroupParentAndChild(originChunkGroupInfo.chunkGroup, chunkGroup); } } }; ``` 上面的分析可能看起来有点懵，但是举一个具体的例子就能很快明白`connectChunkGroups()`的逻辑，如下面所示 * 如果`entry1.js`没有同步依赖`async_B.js`，那么由于它有异步依赖`async_B.js`，`async_B.js`会单独形成一个`Chunk`和`ChunkGroup` * 但是现在`entry1.js`已经有了同步依赖`async_B.js`，那么它就没必要再让`async_B.js`单独形成一个`Chunk`和`ChunkGroup`，因为`entry1.js`已经把`async_B.js`打包进去自己的`Chunk`了，而上面代码中`areModulesAvailable()`就是检测这个逻辑的具体方法，如果`originChunkGroupInfo包含了这个chunkGroup的所有Modules`，那么这个异步`ChunkGroup`就可以删除了 > 具体删除逻辑请看下一节的分析 ![connectChunkGroups.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bb00b81be1104e96a111082c05588277~tplv-k3u1fbpfcp-watermark.image?) # 6.buildChunkGraph-3-cleanupUnconnectedGroups > 清除所有没有连接的`chunkGroups` ## 6.1 allCreatedChunkGroups数据收集 `allCreatedChunkGroups`也是在处理异步依赖`iteratorBlock()`中进行数据初始化 ```javascript const processBlock = (block, isSrc) => { //...处理同步依赖 for (const b of block.blocks) { iteratorBlock(b); } } const iteratorBlock = b => { let cgi = blockChunkGroups.get(b); const entryOptions = b.groupOptions && b.groupOptions.entryOptions; if (cgi === undefined) { // 情况1: 这个异步NormalModule还没有对应的chunkGroup if (entryOptions) { // 场景1: Entry类型 } else if (!chunkGroupInfo.asyncChunks || !chunkGroupInfo.chunkLoading) { // 场景2: webpack.config.js中asyncChunks=false/chunkLoading=false } else { // 场景3: 非Entry+允许asyncChunk的情况 c = compilation.addChunkInGroup( b.groupOptions || b.chunkName, module, b.loc, b.request ); blockConnections.set(b, []); allCreatedChunkGroups.add(c); } } else if (entryOptions) { // 情况2: 这个异步NormalModule有对应的chunkGroup，而且它是入口类型的 entrypoint = cgi.chunkGroup; } else { // 情况3: 这个异步NormalModule有对应的chunkGroup，而且它不是入口类型的 c = cgi.chunkGroup; } if (c !== undefined) { // 处理不是Entry类型 } else if (entrypoint !== undefined) { // 处理Entry类型 chunkGroupInfo.chunkGroup.addAsyncEntrypoint(entrypoint); } } ``` ## 6.2 allCreatedChunkGroups数据处理通过`chunkGroup.getNumberOfParents()`检测异步`ChunkGroup`是否没有关联其`Parent Chunk`，如果没有关联，直接清除该`ChunkGroup` ```javascript const cleanupUnconnectedGroups = (compilation, allCreatedChunkGroups) => { const { chunkGraph } = compilation; for (const chunkGroup of allCreatedChunkGroups) { // 清理依赖，如果这个chunkGroup的父chunk为0，说明没有连接，直接清除 if (chunkGroup.getNumberOfParents() === 0) { for (const chunk of chunkGroup.chunks) { compilation.chunks.delete(chunk); chunkGraph.disconnectChunk(chunk); } chunkGraph.disconnectChunkGroup(chunkGroup); chunkGroup.remove(); } } }; ``` 如下面所示，当`entry1.js`已经有了同步依赖`async_B.js`，那么它就没必要再让`async_B.js`单独形成一个`Chunk`和`ChunkGroup`，因此在上面`connectChunkGroups()`中不会进行`connectChunkGroupParentAndChild(originChunkGroupInfo.chunkGroup, chunkGroup)`关联`ChunkGroup`之间的关系，因此会导致异步依赖`async_B.js`对应的`ChunkGroup.getNumberOfParents() === 0`，最终触发`ChunkGroup`删除逻辑，移除该`ChunkGroup` ![connectChunkGroups.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bb00b81be1104e96a111082c05588277~tplv-k3u1fbpfcp-watermark.image?) # 7.hooks.optimizeChunks ```javascript while (this.hooks.optimizeChunks.call(this.chunks, this.chunkGroups)) { /* empty */ } ``` 在经过`visitModules()`处理后，会调用`hooks.optimizeChunks.call()`进行`chunks`的优化，如下图所示，会触发多个`Plugin`执行，其中我们最熟悉的就是`SplitChunksPlugin`插件 ![截屏2023-02-22 21.37.16.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a4670d39a0e542c6bcd2420a171b455f~tplv-k3u1fbpfcp-zoom-1.image) 由于篇幅原因，具体分析请看下一篇文章`《「Webpack5源码」seal阶段分析(二)》` # 参考 1. [精通 Webpack 核心原理专栏](https://juejin.cn/column/6978684601921175583) 2. [webpack@4.46.0 源码分析专栏](https://juejin.cn/column/7161609931563466766) 3. [webpack5 源码详解 - 封装模块](https://github.com/Hazlank/blog/issues/18) # 工程化专栏系列文章 1. [「Webpack5源码」热更新HRM流程浅析](https://juejin.cn/post/7182087193958023226) 2. [「Webpack5源码」make阶段（流程图）分析](https://juejin.cn/post/7233407035773173819) 3. [「Webpack5源码」enhanced-resolve路径解析库源码分析](https://juejin.cn/post/7233765235555221559) 4. [「Webpack5源码」seal阶段（流程图）分析(一)](https://juejin.cn/post/7236010202381189157) 5. [「Webpack5源码」seal阶段分析(二)-SplitChunksPlugin源码](https://juejin.cn/post/7238978524031041595) 6. [「vite4源码」dev模式整体流程浅析（一）](https://juejin.cn/post/7231210891325194301) 7. [「vite4源码」dev模式整体流程浅析（二）](https://juejin.cn/post/7231564187256061989)