Project Reference优化TypeScript编译性能示例
作者:zxg_神说要有光 发布时间:2024-04-19 09:43:03
引言
TypeScript 给 JavaScript 添加了一套类型系统,可以在编译期间检查出类型错误,这增加了代码的健壮性,但也多了一个编译的过程。
ts 编译速度与项目规模有关,如果项目比较大,代码很多,那就需要编译很长一段时间。
有没有什么办法可以提升 tsc 编译的性能呢?
还真有,TypeScript 3.0 的时候实现了 Project Reference 的特性,就是用于优化编译和类型检查的性能的。
那 Project Reference 是干什么的呢?
Project Reference
想象这样一个场景。项目目录下有两个相对独立的模块 aaa 和 bbb
它们是用同一个 tsconfig.json 来配置编译方式的:
执行 tsc 就会编译所有 include 的文件到 dist 目录下:
假设 aaa 和 bbb 都很大,编译要很久,但是两者的关联还不是特别大。
aaa 模块下的变动基本和 bbb 模块下的没啥关系,但是 aaa 变了,bbb 也要重新编译一遍,bbb 变了 aaa 也要重新编译一遍,这就很没必要。
有的同学说,那在 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 下某个模块的代码,重新编译的时候就不会编译 bbb 了,只会编译 aaa 下的那个模块。
这就是 Project Reference 的作用。
当然,这种编译模式和常规的编译模式不同,所以不是直接用 tsc 来编译,而是用 tsc --build 或者 tsc -b。
此外,Project Reference 还支持通过 prepend 指定编译顺序,比如给 bbb 添加 prepend: true,那么就会先编译 bbb,再编译当前项目,然后编译 aaa:
其实很容易想到,monorepo 里就可以用 Project Reference 来提升 tsc 的编译性能。因为 monorepo 下的多个 project 相互之间都比较独立,一个模块的改动一般不会影响另一个模块,所以编译的时候也应该各自做缓存。
来源:https://juejin.cn/post/7129130418657296421
猜你喜欢
- 注意:myemployees库和shoppingCart库在同一台物理主机,如果不在同一台物理主机该怎么办呢?下面我会介绍到。情况一2个库在
- python函数的参数类型和返回类型默认为int。如果需要传递一个float值给dll,那么需要指定参数的类型。如果需要返回一个flaot值
- Laravel通过传统的登录表单已经让用户认证变得很简单,但是API怎么办?API通常使用token进行认证并且在请求之间不维护sessio
- 它解析并马上执行动态的SQL语句或非运行时创建的PL/SQL块.动态创建和执行SQL语句性能超前,EXECUTE IMMEDIATE的目标在
- 一、假如训练集表现不好1.尝试新的激活函数ReLU:Rectified Linear Unit图像如下图所示:当z<0时,a = 0,
- 前言:本文的主要内容是介绍Python中的变量命名规则和简单数据类型的应用,简单的数据类型包括字符串和数字等,文中还附有代码以及相应的运行结
- python map函数map()函数map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依
- 本文实例为大家分享了python五子棋游戏的具体代码,供大家参考,具体内容如下1.项目简介在刚刚学习完python套接字的时候做的一个五子棋
- 在我们制作主页的过程中,用到表格的地方非常多,灵活运用表格技巧可以为我们的网页增色不少,这里我就详细介
- 坑:在python3.7环境下,通过官方文档安装sanic即扩展插件,但是 sanic-ext包不起作用,具体的表现为:无法打开路由/doc
- 本文实例讲述了Python实现对象转换为xml的方法。分享给大家供大家参考,具体如下:# -*- coding:UTF-8 -*-'
- 什么是pyQt5首先我们来说说什么是pyQt5。搞过GUI界面设计的童鞋一定都了解过微软的MFC。当然了,个人感觉MFC不是一个非常优雅的U
- 这篇文章主要介绍了python imread、newaxis用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习
- 1.InnoDB的锁定机制InnoDB存储引擎支持行级锁,支持事务处理,事务是有一组SQL语句组成的逻辑处理单元,他的ACID特性如下:原子
- 目录一、安装与配置二、定义模型三、生成模型四、访问Django Admin五、操作数据六、最后一、安装与配置Djongo的项目官方地址为:h
- 在安装好MYSQL ODBD的驱动程序后,应如何建立ASP文件连接数据库?我们有两种方法:一种是在ODBC数据源中建立一个DSN。具体方法是
- 301跳转通常用在网站换域名和为了保持链接统一性所用的。比如你原来的域名www.a.com现在换成www.b.com,用了301跳转后,访问
- 如果不用类库(如jquery)来写,往往很多时候,都需要通过id或tag来获取html里的某一对象,然后对其进行操作。为了节省代码,把常用的
- 数据准备数据集(JetRail高铁的乘客数量)下载.假设要解决一个时序问题:根据过往两年的数据(2012 年 8 月至 2014 年 8月)
- 众所周知,我们可以通过索引值(或称下标)来查找序列类型(如字符串、列表、元组…)中的单个元素,那么,如果要获取一个索引区间的元素该怎么办呢?