浅析webpack打包流程（原理）四-chunk优化
接上⽂：浅析 webpack 打包流程(原理) 三 - ⽣成 chunk
六、chunk 优化
chunk 优化阶段概述：
暴露了很多 chunk 优化相关的钩⼦：
webpack打包流程 面试触发optimize相关 hook 移除空 chunk 和 重复 chunk，如配置了SplitChunksPlugin也会在此时进⾏ chunk 分包；
然后触发其他 hook 分别设置 module.id、chunk.id 并对它们进⾏排序；
创建了各类 hash，包括 module hash，chunk hash，content hash，fullhash，hash。
之前 chunk 已经根据 webpack 的预处理和默认规则进⾏了⼀轮分包，现在 webpack 会根据我们配置的插件来对chunks 进⾏优化。
6.1 c hunk 的初步优化
在触发 compilation.hooks: optimize、optimizeModules (负责 module 相关的优化) 等之后，忽略本次打包未触发插件的钩⼦，执
⾏this.hooks.optimizeChunksBasic.call(this.chunks, this.chunkGroups)触发插件：
EnsureChunkConditionsPlugin 处理 chunkCondition
RemoveEmptyChunksPlugin 移除空 chunk
MergeDuplicateChunksPlugin 处理重复 chunk
this.hooks.optimizeChunksAdvanced.call(this.chunks, this.chunkGroups)触发插件：
SplitChunksPlugin 优化切割 chunk，可以看下插件内compilation.hooks.optimizeChunksAdvanced.tap(...)注册的代码
RemoveEmptyChunksPlugin 再次移除空 chunk
RuntimeChunkPlugin 如有配置 optimization.runtimeChunk，可单独抽离 runtime 代码
6.2 设置 mo
6.2 设置 m o dule.id
viveModules.dules, ds)触发插件：
RecordIdsPlugin 设置 module.id
this.hooks.beforeModuleIds.dules)触发插件
NamedModulesPlugin 设置 module.id 为 ⽂件相对路径
然后执⾏：this.applyModuleIds();
这⼀步主要⽤于设置 module.id (如 id 在上⼀步没有设置的话)，内部具体算法为：
先遍历各个 module，出其中最⼤的 id 以它为最⼤值(usedIdmax)，计算出⽐它⼩的所有未使⽤的正整数和(usedIdmax + 1)作为unusedIds，⽤于给没有设置 id 的 module 使⽤，unusedIds⽤尽后，则设置 id 为 (usedIdmax + 1) ++
this.sortItemsWithModuleIds();：根据 module.id 给 module、chunk、reasons 等排序。
6.3 设置 c hunk.id

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。