React code splitting – parte 5

A questo punto dovrebbe essere chiaro come sia possibile utilizzare l’API lazy() in combinazione con Suspense per caricare i componenti solo quando ne abbiamo realmente bisogno. Nei post precedenti abbiamo analizzato l’utilizzo di Suspence e lazy analizzando come possono essere utilizzati all’interno delle nostre applicazioni. In realtà l’utilizzo di molti bundle renderizzati tramite Suspense genera […]

React code splitting – parte 4

Negli articoli precedenti abbiamo visto come con l’utilizzo dell’API lazy() e della Suspense sia possibile migliorare la user experience delle applicazioni pacchettizzando in un bundle separati i vari componenti e scaricandoli solo quando ne abbiamo realmente la necessità. Inoltre, utilizzando la Suspense è possibile visualizzare un fallback durante il caricamento di componenti lazy. Nell’utilizzo di […]

React code splitting – parte 3

Dopo aver descritto nell’articolo precedente l’API lazy(), passiamo ad analizzare un altro elemento fondamentale per la visualizzazione dei componenti lazy, il componente Suspense. All’interno del componente MyComponent viene renderizzato il component OtherComponent, che è stato caricato tramite l’API lazy(). Nella return il componente è inserito all’interno di un componente Suspense. Questo elemento ci permette di […]

React e code splitting – parte 2

Nell‘articolo precedente è stato importato un componente in maniera dinamica, inserendolo all’interno di una useEffect(). Nell’articolo viene caricato il component e successivamente assegnato tramite la useState(). Questo tipo di approccio è sicuramente funzionante, ma diventa difficile da gestire all’interno di progetti reali. Per poter meglio gestire il comportamento dinamico, dall’ultima versione di React è stata […]

React e code splitting – parte 1

Con l’ultima versione di React sono state distribuite nuove Api che consentono di gestire scenari di code-splitting. Ma di cosa si tratta? La creazione di applicazioni web che includono javascript monolite (ad esempio bundle che racchiudono l’intera applicazione), può generare problemi di usabilità e lentezza nel caricamento. Inoltre il code splitting consente al programmatore di […]