React code splitting – Page & Routes

Nel post precedente abbiamo analizzato come non sempre sia vantaggioso utilizzare lazy all’interno di un applicazione react. Abbiamo visto che l’utilizzo di lazy comporta la creazione di caricamenti separati dei vari componenti, richiedendo di fatto una serie di chiamate HTTP che potrebbero influire sullo scaricamento ed il render della UI. Quindi, è necessario fare attenzione quando si progettano pages con componenti lazy.

In particolare in questo post poniamo l’attenzione su react-router, nella definizione delle route all’interno dell’applicazione. Per prima cosa definiamo i componenti lazy:

import {
	BrowserRouter as Router,
	Routes,
	Route,
	Link,
	Outlet,
} from "react-router-dom";
import { FadeLoader } from "react-spinners";

const First = React.lazy(() =>
	Promise.all([
			import("./First"),
			new Promise((resolve) => {
			setTimeout(() => {
			resolve();
			}, 3000);
		}),
	]).then(([m]) => m)
);

const Second = React.lazy(() =>
	Promise.all([
			import("./Second"),
			new Promise((resolve) => {
			setTimeout(() => {
			resolve();
			}, 3000);
		}),
	]).then(([m]) => m)
);

ed anche in questo caso simuliamo una latenza di 3 secondi nel caricamento. Questa latenza ci permette di simulare lo scaricamento dalla rete anche se stiamo sviluppando in locale.

Definiamo quindi la funzione per il layout che utilizza i due componenti lazy appena dichiarati :

function Layout() {
	return (
		<section>
			<nav>
				<p>
					<Link to="first">First</Link>
				</p>
				<p>
					<Link to="second">Second</Link>
				</p>
			</nav>
		<section>
			<Suspense fallback={<FadeLoader color={"lightblue"} size={150} />}>
				<Outlet />
			</Suspense>
		</section>
	</section>
);
}

utilizzando Outlet per il render delle route. Con Outlet vengono visualizzati i route figlio. Anche in questo caso come nell’esempio del post precedente viene visualizzato uno spinner durante il caricamento dei componenti.

export default function App() {
	return (
		<Router>
			<Routes>
				<Route path="/" element={<Layout />}>
				<Route path="/first" element={<First />} />
				<Route path="/second" element={<Second />} />
				</Route>
			</Routes>
		</Router>
	);
}

I due componenti vengono raggruppati separatamente da tutto il resto dell’applicazione. La Suspense è posizionata al di sotto dei link di navigazione, quindi al suo interno verrà visualizzata la pagina dopo essere stata caricata (e con la latenza “simulata”). I child della Suspense sono, infatti, i Route component che effettueranno il render dei componenti lazy.

Cliccando ad sempio sul link First verrà attivata la route /first che richiederà il componente First. La prima volta che verrà richiesto il componente First, verrà effettuato lo scaricamento del bundle.