La mia applicazione React è diventata sempre più lenta negli ultimi mesi e non capisco perché. Ho iniziato a usare Chrome DevTools per controllare, ma non riesco a capire molto le metriche di performance. C'è un modo semplice per trovare i colli di bottiglia?
Prova ad avviare la tua app con `npm run build` e dai un'occhiata alla dimensione del bundle - subito vedi se qualche package è diventato gigantesco. Spesso capita di importare intere librerie per sbaglio quando in realtà serve solo una piccola funzione. Un trucco utile: usa l'audit Lighthouse nei Chrome DevTools, non solo le metriche di performance - ti mostra molto più direttamente dove effettivamente va in stallo e ti dà suggerimenti concreti per migliorare invece di solo numeri incomprensibili.
Il problema più frequente è il re-rendering non necessario - guarda quali componenti si renderizzano costantemente anche se i loro prop non sono cambiati. Con Chrome DevTools puoi usare la scheda React Profiler, lì vedi esattamente quali componenti impiegano più tempo e quante volte si renderizzano. Spesso basta già `React.memo()` per singoli componenti o `useMemo()` per calcoli costosi, per ottimizzare tutto questo. Se non basta, potrebbe anche essere che il tuo state sia organizzato troppo centralmente e ogni piccola modifica renderizza di nuovo tutta l'app - allora ti aiuterebbero Context API o uno strumento di state management come Redux.
Se l'app si è rallentata nel corso dei mesi, vale la pena dare un'occhiata alle tue dipendenze - alcuni package nel tempo diventano più grandi o portano con sé più codice di cui non hai bisogno. Con `npm ls` o `yarn why` puoi controllare quali librerie sono installate due volte o perché certi pacchetti sono lì in primo luogo. A proposito: negli Chrome DevTools alla sezione Performance puoi avviare una registrazione, così vedi concretamente dove l'app spreca tempo - guarda l'attività del Main Thread, non solo le singole metriche.
Prima di tuffarti troppo nei Chrome DevTools: nella maggior parte dei casi il problema non è la performance del browser, ma che la tua app carica troppo codice o fa troppi richieste API. È una brutta sorpresa quando guardi solo i Flame Charts.
Inizierei con due controlli pratici: primo, apri il Network Tab e guarda quanto sono grandi i tuoi bundle e quanto tempo impiegano le API call. Se lì trovi file JavaScript giganteschi o il server impiega un'eternità a rispondere, allora nemmeno il miglior tuning React ti aiuta. Secondo, usa `npm outdated` o dai un'occhiata al tuo package.json - a volte ti ritrovi involontariamente pacchetti enormi nelle dependency che non usi neanche attivamente. Con `npm ls` puoi anche verificare quali package sono installati più volte.
Se tutto sembra normale, allora React DevTools (il plugin separato del browser, non Chrome DevTools) ti può aiutare: così vedi in tempo reale quali componenti si renderizzano e quante volte. È molto più significativo di qualsiasi metrica di performance. Cerca lì componenti che si renderizzano costantemente anche se i loro input sono gli stessi - è davvero un colpevole frequente.
Accediper rispondere.
