ts-rank

A way to visualize which files & types are hurting your TypeScript project compilation time.

• Usage
• How it works / Caveats

Usage

Should work on most TypeScript projects:

npm run tsc --noEmit  --generateTrace .tsTrace && npx ts-rank

When using incremental builds, do this to ensure all files are traced:

npm run tsc --noEmit --generateTrace .tsTrace --incremental false --tsBuildInfoFile null && npx ts-rank

Will output something like this:

# 2        705.05 ms (18 % of total metrics) (312 metrics)

  201 ms   StyledComponentBase            ../DHI/femo-frontend/node_modules/@types/styled-components/index.d.ts:167:133
  138 ms   StyledComponentProps           ../DHI/femo-frontend/node_modules/@types/styled-components/index.d.ts:59:9
  115 ms   StyledComponentProps           ../DHI/femo-frontend/node_modules/@types/styled-components/index.d.ts:59:9
  26 ms    StyledComponentBase            ../DHI/femo-frontend/node_modules/@types/styled-components/index.d.ts:167:133
  8 ms     StyledComponent                ../DHI/femo-frontend/node_modules/@types/styled-components/index.d.ts:158:38
  8 ms     StyledComponentBase            ../DHI/femo-frontend/node_modules/@types/styled-components/index.d.ts:167:133
  8 ms     StyledComponentProps           ../DHI/femo-frontend/node_modules/@types/styled-components/index.d.ts:59:9
  7 ms     ReactDefaultizedProps          ../DHI/femo-frontend/node_modules/@types/styled-components/index.d.ts:55:13
  7 ms     Defaultize                     ../DHI/femo-frontend/node_modules/@types/styled-components/index.d.ts:44:65
  7 ms     StyledComponentBase            ../DHI/femo-frontend/node_modules/@types/styled-components/index.d.ts:167:133

# 1        757.79 ms (20 % of total metrics) (5438 metrics)

  22 ms    IModelType                     ../DHI/femo-frontend/node_modules/mobx-state-tree/dist/types/complex-types/model.d.ts:79:2
  21 ms    named                          ../DHI/femo-frontend/node_modules/mobx-state-tree/dist/types/complex-types/model.d.ts:81:32
  20 ms    named                          ../DHI/femo-frontend/node_modules/mobx-state-tree/dist/types/complex-types/model.d.ts:81:32
  14 ms    IModelType                     ../DHI/femo-frontend/node_modules/mobx-state-tree/dist/types/complex-types/model.d.ts:79:2
  13 ms    named                          ../DHI/femo-frontend/node_modules/mobx-state-tree/dist/types/complex-types/model.d.ts:81:32
  13 ms    IModelType                     ../DHI/femo-frontend/node_modules/mobx-state-tree/dist/types/complex-types/model.d.ts:79:2
  12 ms    named                          ../DHI/femo-frontend/node_modules/mobx-state-tree/dist/types/complex-types/model.d.ts:81:32
  11 ms    IModelType                     ../DHI/femo-frontend/node_modules/mobx-state-tree/dist/types/complex-types/model.d.ts:79:2
  10 ms    ModelInstanceType              ../DHI/femo-frontend/node_modules/mobx-state-tree/dist/types/complex-types/model.d.ts:70:20
  9 ms     IModelType                     ../DHI/femo-frontend/node_modules/mobx-state-tree/dist/types/complex-types/model.d.ts:79:2

Further usage:

# Get help info
npx ts-rank --help

# Provide location to the trace files generated by generateTrace
npx ts-rank --TRACE_FILE trace/trace.json --TYPES_FILE trace/types.json

# Use --pattern as a glob to filter rankings based on file path
npx ts-rank --PATTERN "**/someFolder/**"  

Package json scripts:

{
  "scripts": {
    "trace": "tsc --noEmit --generateTrace .tsTrace && npx ts-rank",
    "trace:full": "tsc --noEmit --incremental false --tsBuildInfoFile null --generateTrace .tsTrace && npx ts-rank",
  }
}

How it works / Caveats

Basically sums up durations based on the sturcturedTypeRelatedTo metrics - which is a significant but still only part of the story.

This metric correlates to type compilation time but more importantly for this tool, it contains information on where the type comes from in an easy-to-parse way.

Hopefully this trace info becomes easier to parse in future. Perhaps someone with more experience can contribute further detail.