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

Introduction : pourquoi le profilage TypeScript est important pour les performances

Lorsque vous écrivez une application en TypeScript, elle peut fonctionner rapidement sur de petites données, mais avec la croissance du projet, des goulots d'étranglement commencent à apparaître — des sections de code qui ralentissent l'exécution. Le profilage aide à trouver ces zones problématiques et à comprendre où le plus de temps est passé.

Dans cet article, nous allons voir comment profiler du code TypeScript à l'aide des outils intégrés du navigateur et de Node.js. Vous apprendrez à trouver les fonctions lentes, à analyser la pile d'appels et à optimiser les sections critiques.

Cet article est destiné aux développeurs débutants qui connaissent déjà les bases de TypeScript et souhaitent améliorer les performances de leurs applications.

Concepts de base du profilage

Le profilage est le processus de collecte de données sur la façon dont un programme s'exécute : combien de temps prennent les fonctions, à quelle fréquence elles sont appelées, quelles ressources sont consommées.

Dans le contexte de TypeScript, il est important de comprendre plusieurs métriques clés :

\n
• Temps d'exécution — combien de millisecondes chaque fonction prend.
\n
• Nombre d'appels — à quelle fréquence une fonction est appelée.
\n
• Mémoire — combien de mémoire est allouée et libérée.
\n
• Pile d'appels — la séquence d'appels de fonctions.
\n

Pour profiler du code TypeScript, vous pouvez utiliser à la fois les outils du navigateur (Chrome DevTools) et les utilitaires Node.js (par exemple, --inspect ou clinic.js).

Outils de profilage TypeScript

Chrome DevTools pour le code côté client

Si votre application TypeScript fonctionne dans un navigateur, le meilleur outil est les Chrome DevTools intégrés. Ouvrez l'onglet Performance et cliquez sur le bouton d'enregistrement. Effectuez une action sur la page, arrêtez l'enregistrement et obtenez une timeline.

Exemple d'analyse : vous voyez que la fonction processData prend 300 ms. C'est un signal pour optimiser.

Node.js et le profileur intégré

Pour le code TypeScript côté serveur (Node.js), utilisez le flag --inspect ou --prof. Par exemple :

node --inspect dist/app.js

Ensuite, ouvrez chrome://inspect dans le navigateur et connectez-vous au processus. Vous obtiendrez les mêmes capacités DevTools, mais pour le code serveur.

clinic.js — un utilitaire simple pour Node.js

Installez clinic.js globalement :

npm install -g clinic

Lancez le profilage :

clinic doctor -- node dist/app.js

L'utilitaire affichera un rapport visuel avec des recommandations.

Trouver les goulots d'étranglement en pratique

Exemple 1 : Tri lent d'un tableau

Supposons que vous ayez une fonction de tri d'un grand tableau d'objets :

interface User {\n    id: number;\n    name: string;\n    age: number;\n}\n\nfunction sortUsers(users: User[]): User[] {\n    return users.sort((a, b) => {\n        // Comparaison lente de chaînes\n        const nameA = a.name.toLowerCase();\n        const nameB = b.name.toLowerCase();\n        if (nameA < nameB) return -1;\n        if (nameA > nameB) return 1;\n        return 0;\n    });\n}

Lors du profilage, vous remarquerez que toLowerCase() est appelée pour chaque comparaison, et il peut y en avoir O(n log n). Le goulot d'étranglement est la conversion répétée des chaînes.

Optimisation : convertissez les chaînes à l'avance :

function sortUsersOptimized(users: User[]): User[] {\n    return users\n        .map(user => ({\n            ...user,\n            _lowerName: user.name.toLowerCase()\n        }))\n        .sort((a, b) => {\n            if (a._lowerName < b._lowerName) return -1;\n            if (a._lowerName > b._lowerName) return 1;\n            return 0;\n