341 - 《Mako 开发日志（3） - 架构图》

昨天（2023.9.12）下午应要画了 Mako 的架构图，做下介绍。

1、整体架构和 Farm 比较像，做的过程中较多地参考了 Farm。当然，和 Farm 也还是有不少不同的。作为构建方案的后来者，团队同学在做的过程中会不自觉地同时参考 webpack、Farm、rspack、esbuild 等前辈。同时我们搞了个实例仓库，可以一键验证同一份代码在多个不同构建工具下的效果。

2、整体编译分 Build、Generate 和 Update。Build 主要任务是编译和解析文件，生成 Module Graph；Generate 是真正复杂的部分，Tree Shaking、Code Splitting、HMR、Runtime、Scope Hoisting 等均在这个环节完成；Update 即热更，如果说 Generate 是硬复杂，Update 则是软复杂，这里的细节和边界场景非常多。

3、做一些功能层的解释。

1）Tree Shaking 参考 340 - 《Tree Shaking 原理》。

2）Code Splitting 也挺复杂的，评估做得好不好有两个重要维度，重复度和缓存命中率。重复度指一个模块尽量不要出现在多个 Chunk 里，如果存在重复，可能还会导致一些额外问题，比如多实例，比如尺寸增加会导致构建时间的增加。缓存命中率指每次构建之后如何尽量少地更新 Chunk，让用户的浏览器里利用尽量多的缓存文件，基于此，就应该做比如把一些非常稳定的依赖合到一起，他们很少变，每次发布后使用时用老的缓存文件，对于用户来说就能提速。此外，mpa（多页应用）和 spa（单页应用）的 Code Splitting 在实现上是两套逻辑。参考 202 - 《Umi 最佳实践：拆包策略》。

3）HMR 和 Update。除了 HMR 本身设计 Runtime 和 Compile 两部分的实现，比较复杂之外，这部分更多考研的是细活，有很多边界场景都会影响 DX，这也是很多新的构建工具没有做好的地方。比如先 import 文件再创建文件的场景，比如 SourceMap 的更新问题，比如 Fast Refresh 的识别逻辑问题，比如 Res