Déclarations isolées TypeScript : Boostez la vitesse de vos monorepos

Les builds de monorepos ralentissent souvent à cause de la manière dont TypeScript gère les fichiers de déclaration. Par défaut, TypeScript analyse chaque chaîne d'importation avant de créer un seul fichier .d.ts. Cela crée une file d'attente où les packages doivent s'attendre les uns les autres.

Vous pouvez corriger cela avec le flag --isolatedDeclarations.

Ce flag permet des builds parallèles. Au lieu d'attendre les dépendances, chaque package génère ses propres déclarations de manière indépendante. Les équipes constatent une augmentation de la vitesse de build de 3x à 15x.

Le problème :

TypeScript infère généralement les types à travers les frontières des modules. Si le Package A dépend du Package B, le compilateur doit résoudre entièrement B avant de pouvoir commencer A. Dans un grand monorepo, la plupart des packages restent inactifs pendant que le compilateur travaille un par un.

La solution :

Le flag --isolatedDeclarations change les règles. Il vous oblige à écrire des annotations de type explicites pour tout ce que vous exportez.

Le compromis :

Votre code contiendra plus de texte. Vous devrez ajouter manuellement les types de retour aux fonctions et les types aux constantes. Vous ne pouvez pas compter sur le compilateur pour deviner ces types à partir de votre code.

Le résultat :

Comme chaque export possède un type clair, le compilateur n'a pas besoin d'examiner les autres packages pour les comprendre. Il peut traiter chaque package en même temps.

Résultats en conditions réelles :

  • Un monorepo de 18 packages a réduit les temps de build de 47 secondes à 3,2 secondes.
  • Un monorepo de 32 packages a vu des gains de 8x sur les pipelines CI.
  • La performance évolue avec vos cœurs CPU. Plus de cœurs signifie que plus de packages sont buildés simultanément.

Comment migrer :

  1. Activez le flag dans votre tsconfig.json racine et dans la configuration de chaque package.
  2. Utilisez le flag "composite" pour autoriser les références de projet.
  3. Ajoutez des types de retour explicites aux fonctions exportées :
// Avant
export function add(a: number, b: number) {
  return a + b;
}

// Après
export function add(a: number, b: number): number {
  return a + b;
}
  1. Ajoutez des types explicites aux constantes exportées :
// Avant
export const SETTINGS = { port: 3000 };

// Après
export const SETTINGS: { port: number } = { port: 3000 };

Si vous n'ajoutez pas ces types, le compilateur générera des erreurs. Cela garantit que vos types sont déterministes et rapides.

Source : https://dev.to/jsmanifest/typescript-isolated-declarations-real-world-performance-gains-in-monorepo-build-times-25g3