Meine React-Anwendung wurde in den letzten Monaten immer träger und ich versteh nicht warum. Ich habe jetzt angefangen mit Chrome DevTools zu schauen, aber kann mit den Performance-Metriken nicht viel anfangen. Gibt es einen einfachen Weg, um Bottlenecks zu finden?
Starte mal deine App mit `npm run build` und schau dir die Bundle-Größe an - da sieht man sofort, ob irgendein Package wild aufgeblasen ist. Oft passiert es, dass man versehentlich ganze Libraries importiert, obwohl man nur eine kleine Funktion braucht. Ein praktischer Trick: Nutze die Lighthouse-Audit in Chrome DevTools, nicht nur die Performance-Metriken - die zeigt dir viel direkter, wo es tatsächlich hängt, und gibt konkrete Verbesserungsvorschläge statt nur kryptischer Zahlen.
Das häufigste Problem ist unnötiges Re-Rendering - schau dir mal an, welche Komponenten sich ständig neu rendern, obwohl sich deren Props gar nicht geändert haben. Mit Chrome DevTools kannst du das React Profiler Tab nutzen, da siehst du genau welche Komponenten am längsten brauchen und wie oft sie rendern. Oft hilft auch schon `React.memo()` bei einzelnen Komponenten oder `useMemo()` für teure Berechnungen, um das zu optimieren. Wenn das nicht reicht, könnte es auch sein, dass dein State zu zentral organisiert ist und jede kleine Änderung die ganze App neu rendert - dann würde Context API oder ein State Management Tool wie Redux helfen.
Wenn die App über Monate langsamer wurde, lohnt sich ein Blick auf deine Dependencies - manche Packages werden mit der Zeit größer oder bringen mehr Code mit sich, den du gar nicht brauchst. Mit `npm ls` oder `yarn why` kannst du checken, welche Libraries doppelt installiert sind oder warum bestimmte Pakete überhaupt dabei sind. Nebenbei: In den Chrome DevTools unter Performance kannst du eine Aufnahme starten, dann siehst du konkret, wo die App Zeit verschwendet - schau dir die Main-Thread-Aktivität an, nicht nur die einzelnen Metriken.
Bevor du dich zu sehr in den Chrome DevTools verlierst: meistens ist nicht die Browser-Performance das eigentliche Problem, sondern dass deine App zu viel Code lädt oder zu viele API-Anfragen macht. Das ist eine doofe Überraschung, wenn man nur auf die Flame Charts guckt.
Starten würde ich mit zwei praktischen Checks: Erstens, öffne den Network-Tab und schau, wie große deine Bundle sind und wie lange die API-Calls dauern. Wenn da irgendwelche riesigen JavaScript-Dateien rumliegen oder der Server ewig braucht zum Antworten, dann hilft dir das beste React-Tuning nichts. Zweitens, nutze `npm outdated` oder schau dir deine package.json an - manchmal zieht man sich über Dependencies versehentlich Riesenpakete rein, die man gar nicht aktiv nutzt. Mit `npm ls` kannst du auch gucken, welche Packages mehrfach installiert sind.
Wenn das alles normal aussieht, dann können dir React DevTools (das separate Browser-Plugin, nicht Chrome DevTools) helfen: Damit siehst du live, welche Komponenten sich rendern und wie oft. Das ist deutlich aussagekräftiger als irgendwelche Performance-Metriken. Schau da nach Komponenten, die sich ständig neu rendern, obwohl ihre Inputs gleich sind - das ist echt ein häufiger Schuldiger.
Anmeldenzum Beantworten.
