Debugging slow VSCode TS project with tsc generateTrace

VS code feels slow. All of a sudden, saving took forever in a TS project. The first suspect was a recently added WallabyJS test runner extension. So I disabled all plugins but still, saving took several seconds.

My head then turned towards TS. Arrogantly I blamed some dependency but I had not a clue which one. Github TS wiki has some tips and tricks on what to do, including instructions to run a profiler. Turns out, a new profiling tool was introduced not too long ago in TS 4.1. 

The output looks like this.

Compiling the slowest source file takes more than 7 seconds!

There is one massively slow checkSourceFile call which, as the name says, compiles a single file. To my embarrassment, it was in my code 😱

The profiling output is rather hard to decipher. The UI shows which TS internal functions are called and references a separate JSON file containing the type names. In my case, the slow function(s) included some weird single character type names, so it was not much help.

The arguments are references to types.json file

I reverted to bisect debugging. I randomly removed code until all was back to normal. Turns out, the bug was in react-hook-form typing. I had an "extra" type in the form controllers reducing the performance massively. I did not dig too profoundly into why this happens, but I should definitely open an issue. 

	// Fast TS compile
	<Controller
	control={control}
	...>
	</Controller>
	// Slow TS compile
	<Controller<MyInputs, 'myField'>
	control={control}
	...>
	</Controller>

view raw Controller.tsx hosted with ❤ by GitHub

After the fix, the source file was gone from the trace tool visualization and vscode is back to normal speed.

Still, a bit slow component to compile, but much better