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 una serie di chiamate HTTP che possono peggiorare il tempo di scaricamento dell’intera applicazione. Non ha senso creare bundles separati per parti comuni dell’applicazione.

Una best practices è scaricare in un unica chiamata tutti i componenti che fanno parte di una stessa pagina. Non necessariamente dobbiamo rendere lazy le funzionalità che vengono inseriti all’interno di una pagina.

Nel codice seguente viene introdotta una funziona chiamata ShowComponent che consente di caricare in base al nome un particolare componente.

const First = React.lazy(() => import("./First"));
const Second = React.lazy(() => import("./Second"));

function ShowComponent({ name }) {
	switch (name) {
		case "first":
			return <First />;
		case "second":
			return <Second />;
		default:
		return null;
	}
}

function App() {
	const [component, setComponent] = React.useState("");
	return (
		<>
		<label>
			Load Component:{" "}
		<select
			value={component}
			onChange={(e) => setComponent(e.target.value)}
		>
			<option value="">None</option>
			<option value="first">First</option>
			<option value="second">Second</option>
		</select>
		</label>

		<Suspense fallback="loading...">
			<ShowComponent name={component} />
		</Suspense>

		</>
	);
}

Il programma è in pratica una select che consente di selezionare un option scatendando la setComponent. In questo modo è stato creato un selettore che consente di carica il componente first oppure second a seconda di che cosa è stato selezionato nella select. Ovviamente in questo caso il caricamento è di tipo lazy.

Lo step successivo è definire il componente chiamato First nel seguente modo:

import One from "./One";
import Two from "./Two";
import Three from "./Three";

export default function First() {
	return (
		<>
			<One />
			<Two />
			<Three />
		</>
	);
}

Questo componente carica i component One, Two e Three che fanno parte dello stesso bundle. Potremmo essere tentati di renderli lazy, ma non avrebbe senso. Facendo parte dello stesso componenente, renderli lazy richiederebbe tre chiamate HTTP, mentre mantenerli nello stesso bundle ne richiede soltanto una. Ecco quindi un modo per ottimizzare la richiesta del componente First.

E’ quindi fare attenzione a come vengono strutturate le pagine e soprattutto a come inserire all’interno di bundle i singoli componenti (gestendoli in maniera lazy).