0Pricing
TypeScript Academy · Leçon

Profiler une compilation TypeScript lente

Utilisez --extendedDiagnostics et --generateTrace pour trouver les goulots d’étranglement

Profiler une compilation TypeScript lente est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.

Pourquoi TypeScript peut être lent

Les types conditionnels complexes, les grandes distributions d’unions et les types mappés profondément récursifs peuvent ralentir considérablement le vérificateur de types de TypeScript dans les grands projets.

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

Option --extendedDiagnostics

Exécutez tsc --extendedDiagnostics pour voir le détail du temps de compilation : analyse syntaxique, liaison, vérification des types et phases de génération.

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

Option --generateTrace

tsc --generateTrace ./trace produit un fichier de trace compatible avec Chrome DevTools que vous pouvez charger dans l’onglet Performance afin de voir quels types sont coûteux à traiter.

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

Analyser la trace

Dans la trace, recherchez les longues barres horizontales représentant les instanciations de types coûteuses. Le nom du type et l’emplacement dans le code source vous indiquent ce qu’il faut optimiser.

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

Option --listFiles

tsc --listFiles affiche chaque fichier inclus dans la compilation. L’inclusion accidentelle de grands répertoires node_modules est une cause fréquente de problèmes de performances.

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

Réduire l’inclusion des fichiers

Utilisez include et exclude dans tsconfig pour limiter les fichiers traités par TypeScript.

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

skipLibCheck pour des gains rapides

skipLibCheck: true ignore la vérification des types de tous les fichiers de déclaration .d.ts, ce qui peut accélérer considérablement la compilation dans les projets comportant de nombreuses dépendances.

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

Isoler les types coûteux

Extrayez les calculs de types coûteux dans des types intermédiaires nommés afin que TypeScript puisse les mettre en cache au lieu de les recalculer à chaque emplacement d’utilisation.

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

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

Vérifier avec transpileOnly

En développement, utilisez ts-jest ou esbuild avec transpileOnly: true pour ignorer la vérification des types et accélérer les itérations. Exécutez séparément les vérifications complètes des types dans l’intégration continue.

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

Performances de l’éditeur

Les ralentissements du serveur de langage TypeScript dans VS Code sont souvent dus aux mêmes types coûteux. Vérifiez TypeScript: Restart TS Server et la trace TS du serveur de langage.

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

Récapitulatif : profilage de la compilation

Utilisez --extendedDiagnostics pour obtenir des mesures de temps générales, --generateTrace pour analyser chaque type, puis réduisez l’inclusion des fichiers, les conditionnelles imbriquées et les distributions de grandes unions afin d’accélérer la compilation.

Vérification rapide

Quel indicateur génère un fichier de trace compatible avec Chrome DevTools ?

Ce que vous avez appris

Profilez la compilation TypeScript avec --extendedDiagnostics et --generateTrace. Réduisez le temps de compilation en limitant l’inclusion des fichiers, en utilisant skipLibCheck, en mettant en cache les types intermédiaires et en évitant les opérations sur les types profondément récursives ou distributives.

Questions Fréquemment Posées

La leçon « Profiler une compilation TypeScript lente » est-elle gratuite ?

Oui — le texte complet de « Profiler une compilation TypeScript lente » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Profiler une compilation TypeScript lente » ?

Utilisez --extendedDiagnostics et --generateTrace pour trouver les goulots d’étranglement Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Profiler une compilation TypeScript lente » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?

Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Profiler une compilation TypeScript lente
  2. Éviter les opérations de types coûteuses
  3. skipLibCheck et déclarations isolées
  4. Vérification des types en intégration continue : stratégies et outils
← Retour à TypeScript Academy