TypeScript Academy · Lektion

Langsame TypeScript-Kompilierung profilieren

Finden Sie mit --extendedDiagnostics und --generateTrace Engpässe.

Langsame TypeScript-Kompilierung profilieren ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum TypeScript langsam sein kann

Komplexe Conditional Types, große Union-Distributionen und tief rekursive Mapped Types können dazu führen, dass TypeScripts Type Checker in großen Projekten erheblich langsamer wird.

// Expensive: distributive conditional on large union
type Slow = LargeUnion extends infer T ? T extends string ? T : never : never;

--extendedDiagnostics-Flag

Führen Sie tsc --extendedDiagnostics aus, um eine Aufschlüsselung der Kompilierungszeit zu sehen: Parsing, Binding, Typprüfung und Emit-Phasen.

tsc --extendedDiagnostics 2>&1 | head -40
# Output:
# Files:             212
# Lines:            48320
# Check time:       8.23s  ← focus here

--generateTrace-Flag

tsc --generateTrace ./trace erzeugt eine mit Chrome DevTools kompatible Trace-Datei, die Sie im Tab „Performance“ laden können, um zu sehen, welche Typen besonders aufwendig sind.

tsc --generateTrace ./trace-output
# Open trace-output/trace.json in Chrome DevTools > Performance

Trace analysieren

Suchen Sie im Trace nach langen horizontalen Balken, die aufwendige Typinstanziierungen darstellen. Der Typname und die Quellposition zeigen Ihnen, was optimiert werden sollte.

# Common culprits in traces:
# - Recursive mapped types with large inputs
# - Distributive conditionals over 50+ member unions
# - Deep infer chains on complex generics

--listFiles-Flag

tsc --listFiles zeigt jede in die Kompilierung einbezogene Datei an. Versehentlich einbezogene große node_modules-Ordner sind eine häufige Ursache für Leistungseinbußen.

tsc --listFiles 2>&1 | grep node_modules | wc -l
# If this is large, check your include/exclude settings

Dateieinbeziehung reduzieren

Verwenden Sie include und exclude in der tsconfig, um zu begrenzen, welche Dateien TypeScript verarbeitet.

{
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "**/*.test.ts"]
}

skipLibCheck für schnelle Verbesserungen

skipLibCheck: true überspringt die Typprüfung aller .d.ts-Deklarationsdateien. Das kann die Kompilierung in Projekten mit vielen Abhängigkeiten erheblich beschleunigen.

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

Aufwendige Typen isolieren

Lagern Sie aufwendige Typberechnungen in benannte Zwischentypen aus, damit TypeScript sie cachen kann, anstatt sie an jeder Verwendungsstelle erneut zu berechnen.

// Slow: recomputed at each usage
type Result = ComplexUnion extends string ? ComplexUnion : never;

// Fast: cached
type FilteredUnion = ComplexUnion extends string ? ComplexUnion : never;
type Result = FilteredUnion;

Mit transpileOnly prüfen

Verwenden Sie in der Entwicklung ts-jest oder esbuild mit transpileOnly: true, um die Typprüfung für schnellere Iterationen zu überspringen. Führen Sie vollständige Typprüfungen separat in der CI aus.

// jest.config.js with ts-jest
{
  transform: {
    "^.+\.tsx?$": ["ts-jest", { diagnostics: false }]
  }
}

Editor-Performance

Verlangsamungen des TypeScript-Sprachservers in VS Code lassen sich oft auf dieselben aufwendigen Typen zurückführen. Prüfen Sie TypeScript: Restart TS Server sowie den TS-Trace des Sprachservers.

// VS Code settings.json to enable detailed TS server log:
// "typescript.tsserver.log": "verbose"

Rückblick: Profiling der Kompilierung

Verwenden Sie --extendedDiagnostics für Zeitmessungen auf hoher Ebene und --generateTrace für die Analyse einzelner Typen. Reduzieren Sie außerdem die Anzahl einbezogener Dateien, tiefe Bedingungen und große Union-Distributionen, um die Kompilierung zu beschleunigen.

Kurzer Test

Welches Flag erzeugt eine mit Chrome DevTools kompatible Trace-Datei?

Das haben Sie gelernt

Profilen Sie die TypeScript-Kompilierung mit --extendedDiagnostics und --generateTrace. Verkürzen Sie die Kompilierzeit, indem Sie die Anzahl einbezogener Dateien begrenzen, skipLibCheck verwenden, Zwischentypen zwischenspeichern und tief rekursive oder distributive Typoperationen vermeiden.

Häufig gestellte Fragen

Ist die Lektion „Langsame TypeScript-Kompilierung profilieren“ kostenlos?

Ja — der vollständige Text von „Langsame TypeScript-Kompilierung profilieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Langsame TypeScript-Kompilierung profilieren“?

Finden Sie mit --extendedDiagnostics und --generateTrace Engpässe. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Langsame TypeScript-Kompilierung profilieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Langsame TypeScript-Kompilierung profilieren
Aufwendige Typoperationen vermeiden
skipLibCheck und isolierte Deklarationen
Typprüfung in CI: Strategien und Werkzeuge

← Zurück zu TypeScript Academy