Guida al caricamento pigro con React

Introduzione

Quando sviluppiamo applicazioni React di grandi dimensioni, in genere utilizziamo molte immagini e video, installiamo pacchetti/librerie di terze parti, effettuiamo chiamate API e facciamo una varietà di altre cose. Ciò naturalmente aumenta il tempo necessario per caricare la nostra applicazione e si traduce in un'enorme dimensione del pacchetto, che contribuisce a un'esperienza utente scadente. Ecco dove caricamento lento entra in atto. Ci consente di caricare il contenuto appena in tempo, subito prima che venga visualizzato nell'applicazione.

Possiamo evitare di precaricare il contenuto mentre è ancora fuori dalla vista e concentrare tutte le risorse sul contenuto che è nella vista.

In questa guida, vedremo come utilizzare React.lazy() ed React.Suspense per implementare la funzionalità di caricamento lento e suddivisione del codice che ci consente di gestire la suddivisione del codice senza la necessità di installare librerie aggiuntive.

Che cos'è il caricamento lento?

Quando lanciamo un'applicazione Web React, di solito raggruppa l'intera applicazione in una volta, caricando tutto, comprese le pagine dell'intera app Web, le immagini, il contenuto e molto altro per noi, con conseguente potenziale caricamento di un tempo lento e prestazioni complessive scarse, a seconda di la dimensione del contenuto e la larghezza di banda Internet in quel momento.

Caricamento lento ci permette di caricare componenti specifici solo quando sono necessari. In genere, ci esibiamo anche divisione del codice in componenti logici che possono anche essere caricati pigramente con il contenuto.

Ad esempio, se disponiamo di una pagina dashboard che visualizza molte informazioni da varie fonti quando viene cliccata, è sempre meglio mantenere questi componenti e pagine caricati in modo lento, in modo che vengano caricati solo quando necessario o richiesto dall'utente.

Nota: È noto come suddivisione del codice. Ciò si ottiene senza ridurre la quantità di codice nella nostra app.

In sintesi, il caricamento lento ci consente di eseguire il rendering di componenti o elementi su richiesta, rendendo la nostra app più efficiente e fornendo una migliore esperienza utente.

Nota: App a pagina singola (SPA) sono progettati per contenere tutte le pagine e il contenuto all'interno di un unico documento/pagina. Ecco perché il caricamento lento è particolarmente utile durante lo sviluppo di SPA.

Come implementare il caricamento lento in React

Finora, abbiamo visto cos'è il caricamento lento e perché è importante implementarlo. Ora, diamo un'occhiata a come possiamo implementarlo nelle nostre applicazioni React, utilizzando due funzionalità di React che semplificano l'implementazione della suddivisione del codice e del caricamento lento: Reagire.pigro() ed Reagire.Suspense.

React.lazy() è una funzione che ci permette di renderizzare importazioni dinamiche allo stesso modo dei normali componenti. Utilizzando le importazioni dinamiche insieme a React.lazy() ci consentirà di importare un componente appena prima che venga visualizzato su uno schermo. Una cosa importante da notare è che React.lazy() accetta una funzione come argomento: quella funzione deve chiamare la dinamica import() nel suo corpo.

React.Suspense ci consente di specificare il fallback puntello che accetta un contenuto segnaposto che verrebbe utilizzato come a indicatore di carico mentre tutti i componenti pigri vengono caricati.

Iniziamo osservando come possiamo implementare il caricamento lento nei nostri componenti importati e quindi come possiamo implementarlo nei nostri percorsi in modo che le pagine non vengano caricate finché non ci spostiamo.

Iniziamo

Supponiamo di avere la nostra applicazione React e di aver importato il file About componente nel Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

Ora possiamo implementare il caricamento lento facendo uso di React.lazy():

import React from 'react';


const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

Nota: React.lazy() usato in questo modo restituisce a Promise oggetto. Quella promessa si risolve in un modulo che contiene un componente React che vogliamo caricare pigro al suo interno default esportare.

Abbiamo implementato il caricamento lento utilizzando React.lazy(), ma il codice sopra genererà sempre un errore dicendo che il nostro “React component suspended while rendering, but no fallback UI was specified”. Questo può essere risolto avvolgendo il componente con React.Suspense'S fallbackz e allegando gli oggetti di scena di fallback come abbiamo spiegato in precedenza:

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

Nota: Il prop di fallback può richiedere un componente da mostrare prima che il contenuto originale venga caricato.

Inoltre, possiamo decidere di farlo destrutturare l'importazione React per rendere il codice più pulito e leggibile:

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

Finora, abbiamo visto come implementare il caricamento lento nei nostri componenti importati. Ora, vediamo come implementarlo nelle nostre rotte durante il routing con il router React.

Come implementare il caricamento lento con React Router

Il lazy routing è in realtà una buona pratica per i percorsi che hanno molto contenuto e possono rallentare il tempo di caricamento dell'applicazione. L'implementazione del caricamento lento per i percorsi React è quasi identica a quanto fatto in precedenza durante il caricamento lento di componenti importati dinamicamente.

Caricamento lento I percorsi React si riferiscono all'importazione dinamica di un componente solo quando è necessario. Ad esempio, supponiamo di avere due percorsi nella nostra applicazione e due componenti che rappresentano tali percorsi. Se implementiamo il percorso menzionato nel modo seguente, ogni componente verrà caricato solo quando navighiamo verso il percorso corrispondente:

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;

Conclusione

In questa guida abbiamo appreso cosa sono il caricamento lento e la suddivisione del codice, come implementarli e che il posto migliore per implementare il caricamento lento sono le route. Ciò evita il rendering dell'intera pagina in una volta, il che potrebbe comportare un tempo di caricamento più lento quando si tratta di pagine con grandi quantità di contenuto.