Profilage du code TypeScript : trouver les goulots d'étranglement

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

Introduction : Pourquoi profiler TypeScript ?

TypeScript est un outil puissant pour développer des applications évolutives, mais même le code le mieux typé peut souffrir de problèmes de performance cachés. Les goulots d'étranglement proviennent d'algorithmes inefficaces, d'opérations d'E/S excessives, d'une gestion mémoire inappropriée ou de calculs lents. Le profilage vous permet d'identifier ces zones et de les optimiser de manière ciblée.

Dans cet article, nous allons explorer des méthodes pratiques pour profiler du code TypeScript : des outils intégrés aux navigateurs jusqu'aux utilitaires spécialisés pour Node.js. Vous apprendrez à trouver les fonctions lentes, à analyser la pile d'appels et à prendre des décisions basées sur les données.

Outils de profilage TypeScript

Profiler du code TypeScript n'est pas différent du profilage de JavaScript, puisque TypeScript est compilé en JS. Cependant, il est important de considérer que le code source TypeScript original peut contenir des abstractions supplémentaires (generics, décorateurs, interfaces) qui, après compilation, peuvent générer des motifs non évidents.

1. Performances de Chrome DevTools

Pour les applications frontend, le meilleur choix est l'onglet Performance dans Chrome DevTools. Il enregistre l'activité de la page et affiche un diagramme en flammes, le temps d'exécution des fonctions, les événements et l'utilisation de la mémoire.

Comment l'utiliser :

Ouvrez DevTools (F12) → onglet Performance.
Cliquez sur le bouton d'enregistrement (cercle), effectuez l'action souhaitée sur la page.
Arrêtez l'enregistrement et étudiez le diagramme en flammes.

Exemple : si vous avez une fonction de traitement de tableau qui prend plus de 100 ms, vous la verrez comme un bloc large sur le graphique. Cliquez dessus — DevTools affichera le code source (si les source maps sont activées) et le temps d'exécution.

// Code TypeScript originalfunction processItems(items: number[]): number[] {  return items    .filter(x => x > 10)    .map(x => x * 2)    .reduce((acc, val) => acc + val, 0);}

Après le profilage, vous pourriez voir que filter et map créent des tableaux intermédiaires, ce qui ralentit les performances sur de grands ensembles de données. L'optimisation consiste à remplacer la chaîne par un seul passage utilisant for ou reduce.

2. Profileur intégré de Node.js

Pour le code serveur Node.js, utilisez le profileur V8 intégré. Il collecte des échantillons de la pile d'appels et permet d'analyser quelles fonctions consomment le plus de temps.

Exécution :

node --prof your-compiled-file.js

Après exécution, un fichier nommé isolate-0x...-v8.log sera créé. Convertissez-le dans un format lisible :

node --prof-process isolate-0x...-v8.log > profile.txt

Dans le fichier résultant, vous verrez un tableau avec les colonnes : ticks (nombre d'échantillons), total (temps total), nonlib (temps hors bibliothèques) et nom de fonction. Les fonctions avec le plus grand nombre de ticks sont vos candidates à l'optimisation.

3. ts-node et Source Maps

Lors du développement en TypeScript, ts-node est souvent utilisé pour exécuter du code sans compilation préalable. Pour le profilage, assurez-vous que les source maps sont activées dans tsconfig.json :

{  "compilerOptions": {    "sourceMap": true,    "inlineSourceMap": true  }}

Lancez ensuite l'application avec le drapeau --inspect :

node --inspect -r ts-node/register src/app.ts

Ouvrez Chrome et naviguez vers chrome://inspect. Vous verrez votre application et pourrez utiliser DevTools pour le profilage, en visualisant le code TypeScript original au lieu du JavaScript compilé.