React Academy · Lezione

Analisi del bundle e strategia di code splitting

Analizzi le dimensioni del bundle con rollup-plugin-visualizer e definisca una strategia di code splitting per route.

Analisi del bundle e strategia di code splitting è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Perché le dimensioni del bundle sono importanti

I bundle JavaScript di grandi dimensioni ritardano il Time to Interactive. Ogni KB di JavaScript deve essere scaricato, analizzato ed eseguito prima che la pagina diventi interattiva, soprattutto sulle reti mobili lente.

Analizzare con rollup-plugin-visualizer

Nei progetti Vite, usi il plugin visualizer per generare una treemap del bundle che mostra quali moduli occupano più spazio.

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    visualizer({ open: true, gzipSize: true, brotliSize: true })
  ],
});

// After build, open the generated HTML file to explore the treemap

Bundle Analyzer di Next.js

Usi @next/bundle-analyzer per analizzare i bundle server e client in Next.js.

npm install @next/bundle-analyzer

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({});

// Run:
// ANALYZE=true npm run build

Code splitting basato sulle route

La suddivisione più efficace consiste nel caricare il codice di ogni route solo quando l'utente vi accede. React Router con lazy() e l'App Router di Next.js lo fanno automaticamente.

// React Router v6 with lazy loading
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

<Routes>
  <Route path="/dashboard" element={<Suspense fallback={<Loading />}><Dashboard /></Suspense>} />
  <Route path="/settings" element={<Suspense fallback={<Loading />}><Settings /></Suspense>} />
</Routes>

Code splitting a livello di componente

Rimandi il caricamento dei componenti pesanti, come mappe, grafici ed editor, finché non sono necessari, usando lazy().

const MonacoEditor = lazy(() => import('@monaco-editor/react'));
const MapView = lazy(() => import('./MapView'));

function ProductEditor({ showMap }) {
  return (
    <>
      <Suspense fallback={<EditorSkeleton />}><MonacoEditor /></Suspense>
      {showMap && <Suspense fallback={<MapSkeleton />}><MapView /></Suspense>}
    </>
  );
}

Import dinamici per funzionalità condizionali

Importi le librerie di grandi dimensioni solo quando viene attivata una funzionalità, per evitare di caricarle per tutti gli utenti.

async function exportToPDF() {
  const { default: jsPDF } = await import('jspdf'); // ~300KB — loaded on demand
  const doc = new jsPDF();
  doc.text('Hello', 10, 10);
  doc.save('export.pdf');
}

Tree shaking

I bundler moderni eliminano gli export inutilizzati (dead code). Si assicuri che le dipendenze supportino ESM, non CJS, affinché il tree shaking funzioni, ed eviti di importare intere librerie quando usa una sola funzione.

// Bad — imports entire lodash (~70KB):
import _ from 'lodash';
const result = _.debounce(fn, 300);

// Good — imports only debounce (<2KB):
import debounce from 'lodash/debounce';
// or with tree-shaking-friendly lodash-es:
import { debounce } from 'lodash-es';

Precaricare i chunk critici

Usi <link rel='modulepreload'> o i commenti magici di Webpack per precaricare il chunk della pagina successiva mentre l'utente si trova sulla pagina corrente.

// Webpack magic comment — preload on hover:
const Dashboard = lazy(() => import(/* webpackPrefetch: true */ './Dashboard'));
// or preload (higher priority):
const Dashboard = lazy(() => import(/* webpackPreload: true */ './Dashboard'));

Analizzare l'impatto delle dipendenze di terze parti

Usi bundlephobia.com o l'estensione Import Cost di VS Code per verificare la dimensione compressa con gzip di qualsiasi pacchetto npm prima di installarlo.

Impostare un budget per il bundle

Imposti un limite di dimensione per ogni route nella configurazione di Webpack o Vite. La build non va a buon fine se un chunk supera il budget, consentendo di rilevare regressioni accidentali delle dimensioni nella CI.

// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'vendor-react': ['react', 'react-dom'],
        'vendor-router': ['react-router-dom'],
      },
    },
  },
  chunkSizeWarningLimit: 200, // warn at 200KB
},

Verifica rapida

Qual è la strategia di code splitting più efficace per le SPA React con molte pagine?

Riepilogo

Analizzi i bundle con rollup-plugin-visualizer o @next/bundle-analyzer. Usi suddivisioni lazy() basate sulle route e a livello di componente. Applichi il tree shaking importando solo ciò che usa. Imposti budget per le dimensioni nella CI e usi indicazioni di prefetch/preload per la route successiva più probabile.

Domande Frequenti

La lezione «Analisi del bundle e strategia di code splitting» è gratuita?

Sì — il testo completo di «Analisi del bundle e strategia di code splitting» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Analisi del bundle e strategia di code splitting»?

Analizzi le dimensioni del bundle con rollup-plugin-visualizer e definisca una strategia di code splitting per route. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Analisi del bundle e strategia di code splitting»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Misurazione dei Core Web Vitals nelle app React
Analisi del bundle e strategia di code splitting
Ottimizzazione di immagini e font in React
Riduzione dell'INP: ottimizzazione degli event handler

← Torna a React Academy