查看原文
其他

Nest.js 这么大的项目是怎么优化 ts 编译性能的?

IT服务圈儿 2023-02-06

The following article is from 神光的编程秘籍 Author 神说要有光

来源丨经授权转自 神光的编程秘籍(ID:gh_7aed10cde089)

作者丨神说要有光


Nest.js 是流行的 node 服务端框架,最近我注意到它有一个大的 PR。

这个 PR 涉及到 50 多个文件,800 多行代码的改动:

同学们肯定会觉得这么多代码改动肯定是大版本升级无疑了。

然而,它并没有更新版本号:

可以看到 Nest 从 gulp 切换到了 tsc 编译,但是版本号依然是 9.1.2。

为什么这么大的 PR 没有改版本号呢?

看下 PR 的内容就知道了:

这个 PR 是从 gulp 切换到了 tsc 的 Project Reference,优化了编译性能,并且启动也更简单了。

只是构建相关的优化,不更新版本号也正常。

有的同学可能会问了,Project Reference 是什么东西?为什么它能提升 tsc 编译性能呢?

我们先看下之前 Nest 是怎么编译 nest 源码的:

通过 gulp 的 build 命令,产物输出到 node_modules/@nestjs 下。

gulp 记录了项目中每一个包的 tsconfig.json:

然后用 tsc 读取每一个 tsconfig.json 来编译 ts 代码:

这个流程很容易理解,就是通过 tsc 根据一个个的 tsconfig.json 来编译 ts 代码,输出到不同目录,gulp 只是组织这个流程的。

那现在 tsc 又是怎么编译的呢?

首先,现在不用 gulp 组织流程了,直接执行 tsc,只是加上了 -b,这个就是开启 project reference 用的:

所谓的 project reference 就是这个东西:

image.png

也就是 tsconfig 里通过 references 引用其他 project。

如果其他 project 也依赖别的 project 可以再次引用:

编译的时候就会一起编译。

这样和单独跑 tsc 不是一样么?有区别么?

区别大了去了。

现在执行 tsc -b 之后会在每个 project 下生成这样一个 tsconfig.build.tsbuildinfo 的文件:

每个 project 都有:

那这个文件有啥用呢?

看下内容就知道了:

它记录了这个 project 所有编译的文件名:

还有 hash 的版本号,是否访问了全局作用域:

这样再次编译的时候有啥不一样么?

那肯定是编译过后的就不用编译了呀,相当于做了一层缓存,每次对比下改动的文件的 hash,如果有变化才去编译。

不同的 project 是分开缓存的,一个 project 变了只要单独编译那个 project 即可,其余的就可以跳过了。

这样自然就可以提升编译性能。

不过它提升的只是第二次编译的性能,首次编译还是要全量编译的。

这也是为什么 PR 里提到的是更快的 rebuild:

为什么从 gulp 切换到 tsc project reference 我们知道了。那新版的 nest 如何调试呢?

我们直接用 nest 项目自带的案例调试就行。

nest 提供了 sample 目录,下面有很多案例项目:

我们新建一个 .vscode/launch.josn 的调试配置文件:

image.png

新增这样的调试配置:

{
  "name""Launch via NPM",
  "request""launch",
  "runtimeArgs": ["run-script""start"],
  "runtimeExecutable""npm",
  "console""integratedTerminal",
  "cwd""${workspaceFolder}/sample/01-cats-app/",
  "skipFiles": ["<node_internals>/**"],
  "type""node"
}

这个配置很容易看明白,就是在 01-cats-app 这个目录下执行 npm run start。

那 console 指定为 integratedTerminal 是什么意思呢?

跑一下就知道了:

跑起服务来,打个断点,访问 localhost:3000/cats,你会发现日志是打印在 debug console 的:

没有颜色,这自然用的不习惯。

指定 console 为 integratedTerminal,再重新调试:

现在日志就打印在 terminal 了,是不是顺眼多了?

这是调试 nest 项目的方式。

那怎么调试 nest 源码呢?

现在调用栈里的 nest 代码都是编译过后的:

想调试源码就要有 sourcemap。

默认 nest 编译不产生 sourcemap,我们要改下编译配置:

改下 packages/tsconfig.build.json,加上这两个配置就可以了。

sourceMap 为 true 就是生成 sourcemap 的意思,inlineSources 是在 sources 里保存源码,默认生成的 sorucemap 是不包含源码的。

执行 npm run build。

你就会发现生成了 sorucemap:

但是 node_modules/@nestjs 下还是没有 sourcemap,这是因为还少了一步:

nest 的 build 命令有个后置命令:

每次 build 完就会自动把这些文件复制到 node_modules/@nestjs 下:

默认没有编译出 sourcemap,自然也就没有 move 这部分文件。

补上这块,再次执行 npm run build:

然后去 node_modules 下看一眼:

现在就有 sourcemap 了,完美!

然后再跑下 nest 项目的调试:

咋还不是源码呢?

这确实比较坑,因为有个默认配置,禁掉了 node_modules 下的 sourcemap 查找:

去掉即可:

然后重新跑调试:

这时候你就会发现调试的是 nest 的 ts 源码了!

总结

nest 最近通过一个大 PR 把构建方式从 gulp + tsc 切换到了 tsc -b 也就是 project reference 的方式,这样能极大的提升 tsc 编译性能。

原理就是 project reference 的模式会生成一个缓存文件记录着每个 project 编译了哪些文件,hash 是啥,这样再次编译就可以跳过没有更新的文件。

新版 nest 源码的调试也同样需要生成 sourcemap,修改下编译配置,生成 sourcemap 的代码即可(只不过要注意 VSCode Node Debugger 的一个坑,默认不查找 node_modules下的 sourcemap)。

然后就可以愉快的调试 nest 的 ts 源码了!

nest 这么大的项目都用了 tsc project reference 来优化编译性能,那平时我们的项目自然也可以用 project reference 来优化,ts 编译性能优化的时候不妨往这方面考虑一下。

1、面试到底面什么?

2、对于“前端状态”相关问题,如何思考比较全面

3、Spring Cloud 2022 正式发布!我的天,OpenFeign 要退出历史舞台了?!

4、三行代码创建一个进度条,真香!

5、Chrome 发布新的 CSS 视口单位:svh、lvh、dvh!!!

点分享

点点赞

点在看

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存