Usa React.lazy con fiducia: Un modo sicuro per caricare i componenti quando si itera velocemente

Il dilemma#

Al giorno d'oggi, lo sviluppo software si muove più velocemente sotto la popolare filosofia "muoviti velocemente e rompi le cose". Nessun giudizio qui - è semplicemente così che vanno le cose. Tuttavia, questo ritmo rapido può a volte portare a dei problemi, soprattutto quando si tratta di caricare i componenti in React.

Se stai lavorando su un progetto che utilizza React.lazy per caricare i componenti su richiesta, potresti aver incontrato alcuni problemi come ChunkLoadError e Loading chunk failed. Ecco alcune possibili ragioni:

• C'è un problema di rete, ad esempio, la connessione internet dell'utente è lenta o instabile.
• L'utente sta utilizzando una versione obsoleta dell'app e il browser sta cercando di caricare un chunk che non esiste più.

Di solito, un semplice aggiornamento della pagina può risolvere il problema, ma non è una grande esperienza per l'utente. Immagina se appare una schermata bianca quando l'utente sta navigando verso un'altra rotta - non è una buona impressione per la tua app.

Possiamo bilanciare la necessità di velocità con la necessità di un'esperienza utente fluida? Certo. Lascia che ti mostri come (con TypeScript, naturalmente).

La soluzione#

Una soluzione brutale potrebbe essere quella di salvare tutte le versioni dei chunk sul server, in modo da non avere più il problema del "chunk mancante". Man mano che la tua app cresce, questa soluzione può diventare impraticabile a causa dei crescenti requisiti di spazio su disco, e non risolve comunque il problema della rete.

Dato che un retry o un aggiornamento può risolvere il problema, possiamo implementare queste soluzioni nel nostro codice. Poiché il problema di solito si verifica quando l'utente sta navigando verso un'altra rotta, possiamo risolverlo senza che l'utente se ne accorga. Tutto ciò che dobbiamo fare è costruire un wrapper attorno alla funzione React.lazy che gestirà i retry e gli aggiornamenti.

Esistono già alcuni ottimi articoli su come implementare questo tipo di soluzione, quindi mi concentrerò sull'idea e sul funzionamento interno della soluzione.

Crea il wrapper#

Il primo passo è creare un wrapper attorno alla funzione React.lazy:

Gestisci i retry#

Per i problemi di rete, possiamo gestire i retry avvolgendo la importFunction in una funzione tryImport:

Sembra semplice, vero? Puoi anche implementare l'algoritmo di exponential backoff per gestire i retry in modo più efficiente.

Gestisci gli aggiornamenti#

Per il problema della versione obsoleta, possiamo gestire gli aggiornamenti catturando l'errore e aggiornando la pagina:

Tuttavia, questa implementazione è molto pericolosa, poiché potrebbe causare un loop infinito di aggiornamenti quando l'errore non può essere risolto con un aggiornamento. Nel frattempo, lo stato dell'app andrà perso durante l'aggiornamento. Quindi abbiamo bisogno dell'aiuto di sessionStorage per memorizzare il messaggio che abbiamo tentato di aggiornare la pagina:

Ora, quando catturiamo l'errore dalla funzione safeLazy, sappiamo che è qualcosa che non può essere risolto con un aggiornamento.

Più componenti lazy sulla stessa pagina#

C'è ancora una trappola nascosta con l'attuale implementazione. Se hai più componenti lazy sulla stessa pagina, il loop infinito di aggiornamenti potrebbe ancora verificarsi perché altri componenti potrebbero resettare il valore di sessionStorage. Per risolvere questo problema, possiamo usare una chiave unica per ogni componente:

Ora, ogni componente avrà la propria chiave sessionStorage, e il loop infinito di aggiornamenti sarà evitato. Possiamo continuare a perfezionare la soluzione, ad esempio:

• Raccogliere tutte le chiavi in un array, in modo da avere bisogno solo di una chiave di archiviazione.
• Impostare un limite di aggiornamento per aggiornare la pagina più di una volta prima di lanciare un errore.

Ma penso che tu abbia capito l'idea. Una soluzione completa in TypeScript con test e configurazioni è disponibile nel repository GitHub. Ho anche pubblicato il pacchetto react-safe-lazy su NPM, così puoi usarlo subito nel tuo progetto.

Conclusione#

Lo sviluppo software è un lavoro delicato, e anche i minimi dettagli possono richiedere uno sforzo per essere risolti. Spero che questo articolo possa aiutarti a gestire con grazia i problemi con React.lazy e a migliorare l'esperienza utente della tua app.