Project Reference优化TypeScript编译性能示例

引言

TypeScript 为 JavaScript 引入了类型系统，能够在编译阶段捕获类型错误，从而增强代码的健壮性，但这也引入了额外的编译步骤。

TypeScript 的编译耗时与项目规模密切相关，当项目代码量庞大时，编译过程可能耗时较长。

是否存在提升 tsc 编译性能的有效方法？

确实存在。TypeScript 3.0 引入了 Project Reference 特性，专门用于优化编译及类型检查的性能。

Project Reference 的具体作用是什么？

Project Reference

设想这样一个场景：项目目录下存在两个相对独立的模块 aaa 和 bbb。

它们共用同一个 tsconfig.json 文件来配置编译方式：

执行 tsc 命令会将所有 include 配置的文件编译至 dist 目录：

假设 aaa 和 bbb 模块代码量均较大，编译耗时较长，且两者之间的依赖关系并不紧密。

aaa 模块的变动通常与 bbb 模块无关，但每次 aaa 发生变化时，bbb 仍需重新编译；反之亦然。这种全量重编译显然是不必要的。

有人可能会建议，在 aaa 和 bbb 目录下分别放置独立的 tsconfig.json 文件，各自编译各自的模块。

这种方法虽然可行，但会导致多次独立的编译过程，操作较为繁琐。

能否在保持单次编译入口的同时，对相对独立的模块进行缓存处理，避免其随其他模块变动而重复编译？

这正是 Project Reference 所解决的问题。

在 aaa 和 bbb 目录下各自创建 tsconfig.json 文件，并配置各自的编译选项。注意，必须添加 composite: true 选项，这是启用 Project Reference 的必要条件：

随后，在根目录的 tsconfig.json 文件中添加 references 配置，以引入 aaa 和 bbb 模块：

此时执行 tsc --build 进行编译，你会发现编译产物中新增了 .d.ts 声明文件以及 tsconfig.tsbuildinfo 文件：

查看 tsconfig.tsbuildinfo 文件，可以发现它记录了参与编译的文件列表及其对应的 hash 值：

至此，你是否理解了其实现缓存的原理？

正是通过对比文件 hash 值来实现缓存机制。当编译到特定 project 时，系统会检查 hash 是否发生变化；若未变化，则直接跳过编译；若发生变化，则执行编译。

此外，由于其他模块可能引用该 project 的类型，因此需要生成 d.ts 声明文件。即便未显式指定 declaration: true 配置，编译产物中仍会包含 d.ts 文件，这得益于 composite 选项自动启用了 Project Reference 所需的编译选项。

现在，当你修改了 aaa 模块下的代码并重新编译时，系统仅会编译 aaa 模块，而不会触发 bbb 模块的重新编译。

这便是 Project Reference 的核心作用。

需要注意的是，这种编译模式与传统模式不同，因此必须使用 tsc --build 或 tsc -b 命令进行编译，而非直接使用 tsc。

此外，Project Reference 支持通过 prepend 选项指定编译顺序。例如，若给 bbb 添加 prepend: true 配置，则编译顺序将变为：先编译 bbb，再编译当前项目，最后编译 aaa：

不难想到，在 monorepo 架构中应用 Project Reference 可显著提升 tsc 的编译性能。由于 monorepo 下的多个 project 通常相互独立，一个模块的改动往往不影响其他模块，因此编译时各自进行缓存处理是合理且高效的。

总结

TypeScript 3.0 引入了 Project Reference 特性以优化编译性能。

若项目中存在相对独立的模块，且其他模块的变动不影响该模块，但该模块却需随其他模块重新编译，此时即可利用 Project Reference 进行优化。

具体操作为：在独立模块下添加 tsconfig.json 文件，并配置 composite 编译选项；在入口 tsconfig.json 中通过 references 配置引用这些独立模块；最后执行 tsc --build 或 tsc -b 命令进行编译。

通过上述配置，即可实现编译和类型检查的性能优化。

其原理在于编译过程中会生成 tsconfig.tsbuildinfo 文件，记录已编译的文件及其 hash 值。当再次编译时，若文件 hash 未发生变化，则直接跳过编译，从而提升编译速度。

这是 TypeScript 提供的一种编译性能优化机制。当项目规模较大、tsc 执行速度较慢时，建议尝试此方案。

以上就是Project Reference优化TypeScript编译性能示例的详细内容，更多关于Project Reference优化tsc的资料请关注本站其它相关文章！