Implementazione di carico pigro in azione Nativo per Performance Gains

Comprendere il caricamento pigro in React Native

React Native è diventato un framework per lo sviluppo mobile multipiattaforma, permettendo agli sviluppatori di costruire applicazioni di livello nativo con JavaScript e React. Come scala applicazioni, spesso emergeno i colli delle prestazioni, soprattutto durante il carico iniziale. Una delle strategie più efficaci per mitigare questi problemi è caricamento lento]]]. Questa tecnica sfida il caricamento dei componenti, gli schermi e la riduzione dei beni fino a quando non sono

Che cosa è pigro caricamento?

Il caricamento pigro è un modello di progettazione che rimanda l'inizializzazione di un oggetto, un componente o una risorsa fino al punto in cui è richiesto. Nel contesto di React Native, questo significa che uno schermo o un componente non è caricato e reso fino a quando l'utente naviga ad esso o la sua visibilità diventa imminente.

Rendi il rendering iniziale più veloce[[] – L'applicazione lancia solo componenti essenziali, quindi l'utente vede il contenuto prima.
L'utilizzo della memoria inferiore[] – I componenti non utilizzati non sono tenuti in memoria.
Reattività migliorata[[] – Il filo principale non è bloccato dalle importazioni pesanti durante l'avvio.

Nel React Native, il carico pigro viene tipicamente implementato attraverso importazioni dinamiche utilizzando [ e [], o tramite soluzioni specifiche per librerie come React Navigation] per il caricamento pigro a livello di schermo.

Vantaggi di carico pigro in React Native

L'adozione di carichi pigri produce una vasta gamma di miglioramenti delle prestazioni:

Dividere le dimensioni iniziali del bundle[[] – La divisione del codice consente di rompere il bundle JavaScript in piccoli pezzi caricati su richiesta.Questo è fondamentale perché le app React Native spediscono un singolo pacchetto JavaScript che deve essere analizzato ed eseguito al lancio.
Tempo più veloce per interattivo (TTI)[[] – L'applicazione diventa utilizzabile prima perché i calcoli pesanti e le grandi importazioni di libreria sono differiti.
La durata della batteria migliore[[] – Le risorse del dispositivo non sono caricate, riducendo l'utilizzo della CPU e la batteria di conservazione.
Manutenzione più semplice[[] – Il caricamento pigro favorisce il codice modulare, rendendo più facile la navigazione e la prova del codebase.

Mentre questi vantaggi sono universali, il carico pigro è particolarmente prezioso per le applicazioni con molti schermi, grafici complessi, supporti ricchi, o SDK di terze parti.

Implementazione di carico pigro con React.lazy e Suspense

React Native supporti e [ dalla versione 0.62. Tuttavia, ci sono sfumature rispetto al React per il web.

Set di base

In primo luogo, assicurarsi che si sta utilizzando una versione React Native compatibile (>=0.62) e che il vostro bundler (Metro) è configurato per supportare le importazioni dinamiche.

Passo 1 – Carica pigro un componente

Creare un componente pesante, per esempio, un grafico complesso o una grande lista, e importarlo utilizzando :

Passo 2 – Avvolgere con Suspense

Fornire un'interfaccia utente di failback mentre il componente è in fase di caricamento:

Importante Caveat per React Native

Sul web, funziona senza soluzione di continuità con React.lazy. In React Native, [[]] è disponibile ma non tutti i tipi di componenti funzionano perfettamente all'interno di esso—soprattutto componenti di classe legacy o componenti che si basano su [ per effetti collaterali.

Tecniche di caricamento pigro avanzato

Caricamento pigro della schermata con la navigazione reatta

Il caso di utilizzo più comune per il caricamento pigro nelle applicazioni mobili è il caricamento dello schermo differito. La navigazione reagisce, la libreria di navigazione de facto, supporta questo modello fuori dalla scatola tramite il suo prop e dinamico .

Esempio con la navigazione reatta 6:

Puoi inoltre ottimizzare utilizzando prefetching[]: quando un utente si sposta su una scheda o naviga su uno schermo, puoi iniziare a caricare la schermata successiva in anticipo usando o le chiamate manuali .

Immagini di caricamento pigro

Le immagini sono spesso le attività più pesanti in un'app mobile. Le immagini di caricamento pigro significa differire il loro download fino a quando non sono vicino al viewport. È possibile ottenere questo utilizzando librerie come react-native-fast-image] o expo-image, entrambi i quali supportano i modelli pigri di caricamento e di caching fuori di uso di personalizzato

Esempio con FlatList a carico pigro solo righe visibili:

Questo approccio assicura che vengano resi solo gli elementi all'interno della finestra visibile, mentre ulteriori elementi vengono virtualizzati.

Codice Spalato con React.lazy e React Screens di navigazione

Per le grandi applicazioni, è anche possibile dividere il pacchetto JavaScript per schermo utilizzando React.lazy in combinazione con la funzione React Navigation [[[ da React Navigation v5. Tuttavia, si noti che React Navigation v6 utilizza il componente direttamente, in modo da poter avvolgere con pigro come mostrato sopra.

Migliori Pratiche per Caricamento pigro in React Native

Identificare cosa a carico pigro[[] – Profilo la tua app per trovare i componenti più pesanti. In genere questi sono grafici, mappe, video player, forme complesse e schermi che l'utente raramente visita.
Provi i fallback significativi[[] – Usare schermi scheletri, effetti shimmer, o indicatori di attività in modo che l'utente sa qualcosa sta accadendo.
Combina con cache[[] – Una volta che un componente è caricato, considerare di tenerlo in memoria utilizzando la gestione dello stato (ad esempio, Redux, Recoil) o per evitare il rimontaggio.
Avoid lazy caricamento componenti triviali[[[] – La testa di importazione dinamica e Suspense può superare i benefici per componenti molto piccoli (ad esempio, un singolo ).
Test su dispositivi di fascia bassa[[[] – I guadagni di prestazioni sono più evidenti su dispositivi con RAM limitata e CPU più lenta.
L'inlinea della metropolitana richiede[] – Per i progetti più vecchi che non possono utilizzare le importazioni dinamiche, il supporto della metropolitana con nella configurazione della metropolitana per differire il caricamento del modulo.

Pitfalls comune e come evitare di loro

1. Caricamento in corso

Caricamento pigro ogni singolo componente può portare a un'esperienza utente salty con troppi spinner di carico.

2. Carico pigro durante le transizioni

Se carichi pigrito uno schermo che l'utente naviga attraverso una transizione di stack o scheda, lo stato di caricamento può causare un ritardo di invaso.

3. Non gestire errori

Le importazioni dinamiche possono fallire a causa di problemi di rete o corruzione del fascio. Usa per catturare gli errori nel Rimborso di Suspense:

4. Inconsistente comportamento tra piattaforme

iOS e Android possono gestire in modo diverso.

Misurazione e monitoraggio delle prestazioni

Prima di distribuire il carico pigro, stabilire metriche di base utilizzando strumenti come [[]React Native Performance Monitor (disponibile tramite il menu dello sviluppatore), Flipper, o React DevTools].

Tempo di rendering iniziale (TTIR)
Tempo di interattivo (TTI)
Utilizzo della memoria prima e dopo carico pigro
Dimensione del manubrio per chunk

Dopo l'implementazione, la ri-misurazione per quantificare i miglioramenti. In molte applicazioni native di react del mondo reale (ad esempio, []Shopify app[]), carico pigro ridotto tempo di avvio di oltre il 40%.

Risorse esterne e lettura

Conclusioni

Caricamento pigro non è un proiettile d'argento, ma quando applicato correttamente, è uno degli strumenti più potenti in un kit di strumenti di prestazione di React Native sviluppatore. Deferire il carico di componenti non essenziali, immagini e schermi, è possibile ridurre drasticamente i tempi di carico iniziale, ridurre la pressione della memoria e fornire un'esperienza di raramente-smooth ai vostri utenti.