compilation.seal 上期回顾
compilation.seal 中执行了两个重要功能 生成代码 this. createChunkAssets() 和 压缩代码 this.hooks. optimizeChunkAsset。
生成代码 createChunkAssets
1读取 webpack 的输出配置 outputOptions
2生成 chunk 映射 module 的 manifest, 并添加通过 module 生成 chunk 代码的 render 函数
3manifest 的 render 函数， MainTemplate 的 render 实例方法生成 source 源码
4createChunkAssets 生成 source 源码结束返回 compilation 上赋值给 assets[file]
最后带着图中压缩好的代码进入 this.hooks.optimizeChunkAsset 钩子中进行压缩
optimizeChunkAsset hook
通过 optimizeChunkAsset hook 入口调试 tapable 代码
1.从这个 hook 中进入这个 hook
2.进入到 tapable hook 源码中, 在 thisname 中再次进入
optimizeFn，optimizeChunkAsset hook 的实现功能
构建 runner 实例，提取源码 input 创建 task 任务在 runTasks 中执行
assets.source() 拼接后的 input 代码
runner.runTasks
runTasks 流程
遍历 tasks，把 task 中的代码在 boundWorkers 中使用 uglify-es 进行压缩, 最后把压缩后的代码传入 compilation.hooks.optimizeChunkAssets 中的回调里
缓存
缓存内容
boundWorkers
使用 ugify-es 模块进行压缩
runTasks 回调在 runTasks 回调中保存压缩后的代码, 最后执行 compilation.hooks.optimizeChunkAssets 回调，压缩代码结束
压缩结束后的处理
回到 Compilation.js - seal
回到 Compile.js - compile
回到 onCompiled 回调中准备 emit
代码压缩总结
- webpack 在 Compilation - seal 中调用 this.hooks.optimizeChunkAssets.callAsync
- this.hooks.optimizeChunkAssets 钩子的实现在 uglifyjs-webpack-plugin 中
- 在 uglifyjs-webpack-plugin 的 runTasks 中对当前资源代码使用 worker-farm 多进程压缩和缓存压缩配置和压缩结果
