import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

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

function App() {
  return (
    
      Caricamento...

In questo esempio, i componenti Home, About e Products sono caricati in modo lazy. Il componente Suspense fornisce un'interfaccia di fallback (in questo caso, "Caricamento...") mentre i componenti vengono caricati.

Scenario di Esempio: Immagina una piattaforma di social media globale. Quando un utente effettua il primo accesso, viene indirizzato al proprio news feed (Home). Il codice per funzionalità come i profili utente (About) o il marketplace (Products) viene caricato solo quando l'utente naviga in quelle sezioni, migliorando il tempo di caricamento iniziale.

Angular

Angular supporta il lazy loading dei moduli attraverso la configurazione del suo router. È possibile utilizzare la proprietà loadChildren per specificare un modulo che dovrebbe essere caricato su richiesta.

            
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },
  { path: 'products', loadChildren: () => import('./products/products.module').then(m => m.ProductsModule) },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

            

              
                Copy
              
            
          

In questo esempio, HomeModule, AboutModule e ProductsModule vengono caricati in modo lazy quando l'utente naviga verso le rispettive route.

Scenario di Esempio: Pensa al portale web interno di una multinazionale. Diversi dipartimenti (es. Risorse Umane, Finanza, Marketing) hanno i propri moduli. Il code splitting garantisce che i dipendenti scarichino solo il codice dei dipartimenti con cui interagiscono, ottimizzando il processo di caricamento.

Vue.js

Vue.js supporta il lazy loading dei componenti utilizzando importazioni dinamiche nella configurazione del router.

            
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/products',
    name: 'Products',
    component: () => import(/* webpackChunkName: "products" */ '../views/Products.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

            

              
                Copy
              
            
          

Qui, i componenti Home.vue, About.vue e Products.vue vengono caricati in modo lazy quando le rispettive route vengono visitate. Il commento webpackChunkName aiuta Webpack a creare chunk separati per ogni componente.

Scenario di Esempio: Immagina una piattaforma di formazione online globale. I moduli dei corsi (es. Matematica, Storia, Scienze) possono essere caricati su richiesta man mano che gli studenti vi si iscrivono. Questo approccio minimizza la dimensione del download iniziale e ottimizza l'esperienza utente.

Vantaggi del Code Splitting Basato su Route

• Implementazione Semplice: Relativamente facile da configurare e comprendere.
• Chiara Separazione delle Responsabilità: Si allinea bene con la struttura di molte applicazioni web.
• Tempo di Caricamento Iniziale Migliorato: Riduzione significativa della quantità di codice caricato all'inizio.

Svantaggi del Code Splitting Basato su Route

• Potenziale Duplicazione: Componenti o dipendenze condivise potrebbero essere inclusi in più chunk di route, portando a duplicazione del codice.
• Limiti di Granularità: Potrebbe non essere ideale per applicazioni con componenti complessi condivisi tra più route.

Code Splitting Basato su Componenti

Il code splitting basato su componenti consiste nel suddividere il codice dell'applicazione in base a singoli componenti, anziché a intere route. Questo permette un approccio più granulare al caricamento del codice, caricando solo il codice richiesto per componenti specifici quando sono necessari.

Implementazione

Il code splitting basato su componenti è più complesso di quello basato su route, ma offre maggiore flessibilità e potenziale di ottimizzazione. Anche in questo caso, l'implementazione varia a seconda del framework.

React

In React, è possibile utilizzare React.lazy e Suspense per il lazy loading di singoli componenti all'interno di una route o di un altro componente.

            
import React, { Suspense } from 'react';

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

function MyPage() {
  return (
    

      
Welcome to My Page
      Caricamento Componente...
}>