Project Reference優化TypeScript編譯效能範例

2022-08-08 14:01:36

引言

TypeScript 給 JavaScript 新增了一套型別系統，可以在編譯期間檢查出型別錯誤，這增加了程式碼的健壯性，但也多了一個編譯的過程。

ts 編譯速度與專案規模有關，如果專案比較大，程式碼很多，那就需要編譯很長一段時間。

有沒有什麼辦法可以提升 tsc 編譯的效能呢？

還真有，TypeScript 3.0 的時候實現了 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 相互之間都比較獨立，一個模組的改動一般不會影響另一個模組，所以編譯的時候也應該各自做快取。

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的資料請關注it145.com其它相關文章！