随着项目代码逐渐变得庞大复杂，TypeScript 的构建速度可能会成为一个问题。在这篇文章中，我们将探讨如何优化 TypeScript 构建的速度，以减少等待时间并提高开发效率。
1. 配置 tsconfig.json 文件
tsconfig.json 文件是 TypeScript 的配置文件，能够根据项目的需要定制编译器的设置。在该文件中我们可以进行一些优化，例如：
strict: true 启用 strict 模式可以降低代码出错率，但其会增加编译时间，所以只有在开发阶段才可以开启 strict 模式。同时，在生产环境下建议关闭 strict 模式以减少构建时间。
module: esnext 使用 esnext 模块可以提高构建速度，因为 esnext 可以进行异步模块加载。如果您使用的是 CommonJS，每个模块必须等待依赖的模块加载完毕才能进行编译，这会导致构建速度变慢。
noEmitOnError: true 开启 noEmitOnError 可以减少不必要的代码生成，如果有错误发生，TypeScript 编译器会停止生成代码并向您报告错误。
-
------------------ -
--------- -----
--------- ---------
---------------- ----
-
-2. 编译缓存
TypeScript 编译器内置了缓存功能，当您修改代码后，只有修改的文件和其依赖文件会重新编译。在大型项目中，编译缓存可以提高构建速度。
在 TypeScript 4.0 中，编译缓存默认开启。可以在 tsconfig.json 文件中进行如下设置：
-
------------------ -
-------------- ----
-
-3. 减少文件检查
TypeScript 编译器默认会检查所有的 TypeScript 文件。在编译时，您可以指定编译器只检查特定的文件或文件夹。
- ---------- -------- ---------- ---------------- --------------- -
在上面的例子中，我们只检查了 src 目录，并排除了 node_modules 以及所有的 spec 文件。
4. 预编译代码
在开启 module: esnext 的情况下，TypeScript 会进行异步模块加载。但是，这会导致构建过程变慢。因此，我们可以尝试预编译代码。
通过预编译代码，我们可以将模块打包到一个文件中，从而实现更快的构建速度。
-- ------------ ------ -------- ------ ------- -- ------- - ------ - - -- - -- ------------ ------ - --- - ---- ---------- ------------------ ----
如果我们使用 webpack 构建工具，可以配置如下的 webpack.config.js 文件：
-- -----------------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
----------- ------- -------
--
------- -
------ -
-
----- --------
---- ------------
-------- ---------------
--
--
--
--5. 使用缩小版库
TypeScript 默认会编译所有的库，这将会导致构建过程变慢。如果您只使用库的一小部分功能，可以尝试使用缩小版库。
缩小版库只包含必需的代码，可以减少代码的数量，并提高构建速度。如何使用缩小版库请参考库的文档。
6. 使用其他优化策略
除了上述列出的策略之外，还有其他优化策略可以实现更快的构建速度。例如：
使用 babel 编译器与 TypeScript 一起使用
使用 worker_threads 在多个进程中并行编译 TypeScript 代码
使用 eslint-plugin-typescript 插件替代 tslint 插件。
结论
TypeScript 的构建速度是优化取决于编译器设置，文件选择性，代码预编译和其他优化策略。通过以上提及的技巧以及一些其他的手段，可以优化 TypeScript 构建速度，从而提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/67171628ad1e889fe21fa85e