TypeScript à fond : accélérer le code 10 fois

Votre code TypeScript est lent ? Il est temps de regarder sous le capot

Vous avez écrit un code TypeScript parfait. Les types sont définis, les abstractions sont belles, les tests sont verts. Mais le serveur de production « rame » et les composants React se re-rendent avec un délai. Cela vous dit quelque chose ? Souvent, le problème ne vient pas de la logique, mais de la performance TypeScript, que nous ne remarquons pas jusqu'à ce que la charge devienne réelle.

Dans cet article, nous ne parlerons pas de la vitesse de compilation — c'est un sujet pour une autre fois. Nous nous concentrerons sur les performances à l'exécution : comment profiler le code final, trouver les « goulots d'étranglement » et optimiser TypeScript pour que l'application vole. Vous découvrirez pourquoi map est 10 fois plus rapide que forEach, comment le GC tue les FPS et quels outils de profilage vous devriez toujours avoir sous la main.

Outils de profilage TypeScript : de Chrome à Node.js

Avant d'optimiser quoi que ce soit, il faut comprendre où les millisecondes sont perdues. Pour cela, il existe trois approches principales de profilage en TypeScript.

1. Onglet Performance de Chrome DevTools

Si vous écrivez du frontend, votre meilleur ami est l'onglet Performance dans Chrome DevTools. L'enregistrement d'un profil vous montrera une image complète : quel JavaScript s'exécute le plus longtemps, combien de temps prend le garbage collection, et où se produisent les « baisses » de FPS. TypeScript après compilation est du JavaScript pur, donc le profileur voit exactement ce qui est exécuté.

// Exemple : profilage d'un calcul « lourd » dans le navigateur\nfunction processLargeArray(items: number[]): number[] {\n  const result: number[] = [];\n  for (let i = 0; i < items.length; i++) {\n    // Simulation d'un travail lourd\n    result.push(items[i] * Math.sqrt(items[i]));\n  }\n  return result;\n}\n\nconsole.time('processLargeArray');\nconst data = Array.from({ length: 100000 }, (_, i) => i);\nprocessLargeArray(data);\nconsole.timeEnd('processLargeArray');\n

Ouvrez l'onglet Performance, cliquez sur Record, exécutez ce code — et vous verrez le temps d'exécution exact, ainsi que la pile d'appels. Si la fonction prend plus de 100 ms, c'est une raison de réfléchir à l'optimisation du code TypeScript.

2. Profileur Node.js (--prof et --inspect)

Pour le backend Node.js avec TypeScript, utilisez le profileur intégré. Lancez l'application avec le flag --prof :

node --prof dist/server.js\n

Après l'arrêt, un fichier isolate-*.log est créé. Convertissez-le en un format lisible :

node --prof-process isolate-*.log > processed.txt\n

Dans le fichier, vous verrez quelles fonctions (y compris celles du TypeScript compilé) consomment le plus de CPU. C'est un outil indispensable pour le profilage TypeScript en production.

3. Profileur CPU V8 via Clinic.js

Pour une analyse plus visuelle, utilisez Clinic.js. Il génère de beaux flame-charts et montre où le code TypeScript « rame ».

npm install -g clinic\nclinic doctor -- node dist/server.js\n

Après les tests, ouvrez le rapport HTML — vous verrez quelles fonctions occupent 90 % du temps. Ce sont souvent des endroits inattendus : par exemple, des appels fréquents à JSON.parse ou des boucles non optimisées.

Top 5 des techniques d'optimisation du code TypeScript

Une fois que le profileur a montré les « points chauds », il est temps de passer à l'optimisation. Voici cinq méthodes éprouvées pour accélérer TypeScript, que j'utilise dans mes projets.

1. Évitez map si vous avez besoin de forEach

Cela peut sembler étrange, mais map crée un nouveau tableau, même si vous ne l'utilisez pas. Si vous avez seulement besoin d'exécuter une action, utilisez forEach ou une boucle for classique.

// Lent — crée un tableau inutile\nconst ids = users.map(user => {\n  sendEmail(user.email);\n  return user.id;\n});\n\n// Rapide