TypeScript auf Maximum: Code 10x schneller machen

Ihr TypeScript-Code läuft langsam? Zeit, unter die Haube zu schauen

Sie haben perfekten Code in TypeScript geschrieben. Typen sind gesetzt, Abstraktionen sind schön, Tests sind grün. Aber der Produktionsserver "ruckelt", und React-Komponenten werden mit Verzögerung neu gezeichnet. Kommt Ihnen das bekannt vor? Oft liegt das Problem nicht in der Logik, sondern in der TypeScript-Performance, die wir erst bemerken, wenn die Last real wird.

In diesem Artikel sprechen wir nicht über die Kompilierungsgeschwindigkeit – das ist ein Thema für eine separate Diskussion. Wir konzentrieren uns auf die Laufzeit-Performance: wie man fertigen Code profiliert, "Engpässe" findet und TypeScript optimiert, damit die Anwendung fliegt. Sie erfahren, warum map 10x schneller ist als forEach, wie GC die FPS killt und welche Profiling-Tools Sie immer dabeihaben sollten.

TypeScript-Profiling-Tools: Von Chrome bis Node.js

Bevor Sie etwas optimieren, müssen Sie verstehen, wo genau die Millisekunden verloren gehen. Dafür gibt es in TypeScript drei Hauptansätze zum Profiling.

1. Chrome DevTools Performance Tab

Wenn Sie Frontend schreiben, ist Ihr bester Freund der Performance-Tab in Chrome DevTools. Die Aufzeichnung eines Profils zeigt Ihnen das vollständige Bild: welcher JavaScript-Code am längsten ausgeführt wird, wie viel Zeit die Garbage Collection beansprucht und wo FPS-"Einbrüche" auftreten. TypeScript ist nach der Kompilierung reines JavaScript, daher sieht der Profiler genau das, was ausgeführt wird.

// Beispiel: "Schwere" Berechnung im Browser profilieren\nfunction processLargeArray(items: number[]): number[] {\n  const result: number[] = [];\n  for (let i = 0; i < items.length; i++) {\n    // Simulation schwerer Arbeit\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

Öffnen Sie den Performance-Tab, klicken Sie auf Record, führen Sie diesen Code aus – und Sie sehen die genaue Ausführungszeit sowie den Call-Stack. Wenn die Funktion mehr als 100ms benötigt, ist das ein Grund, über eine Optimierung des TypeScript-Codes nachzudenken.

2. Node.js Profiler (--prof und --inspect)

Für das Backend mit Node.js und TypeScript verwenden Sie den integrierten Profiler. Starten Sie die Anwendung mit dem Flag --prof:

node --prof dist/server.js\n

Nach Beendigung der Arbeit wird eine Datei isolate-*.log erstellt. Konvertieren Sie sie in ein lesbares Format:

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

In der Datei sehen Sie, welche Funktionen (einschließlich derer aus kompiliertem TypeScript) die meiste CPU-Leistung verbrauchen. Dies ist ein unverzichtbares Werkzeug für das TypeScript-Profiling in der Produktion.

3. V8 CPU Profiler über Clinic.js

Für eine anschaulichere Analyse verwenden Sie Clinic.js. Es erstellt schöne Flame-Charts und zeigt, wo der TypeScript-Code "hängt".

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

Öffnen Sie nach dem Testen den HTML-Bericht – Sie sehen, welche Funktionen 90% der Zeit beanspruchen. Oft sind es unerwartete Stellen: zum Beispiel häufige Aufrufe von JSON.parse oder nicht optimierte Schleifen.

Top-5 Techniken zur Optimierung von TypeScript-Code

Wenn der Profiler die "Hot Spots" angezeigt hat, ist es Zeit, sich der Optimierung zu widmen. Hier sind fünf bewährte Methoden, um TypeScript zu beschleunigen, die ich in meinen Projekten verwende.

1. Vermeiden Sie map, wenn Sie forEach benötigen

Klingt seltsam, aber map erstellt ein neues Array, selbst wenn Sie es nicht verwenden. Wenn Sie nur eine Aktion ausführen müssen, verwenden Sie forEach oder die klassische for-Schleife.

// Langsam – erstellt ein unnötiges Array\nconst ids = users.map(user => {\n  sendEmail(user.email);\n  return user.id;\n});\n\n// Schnell