Concetti di bundling: tree shaking e code splitting
Comprendere come i bundler rimuovono gli export inutilizzati tramite tree shaking e suddividono l’output in chunk per velocizzare il caricamento iniziale delle pagine.
Concetti di bundling: tree shaking e code splitting è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Che cosa fa un bundler?
Un bundler (Vite, webpack, Rollup, Parcel) legge i file sorgente, risolve gli import, trasforma il codice (transpilazione, minimizzazione, ottimizzazione) e produce file che il browser può caricare in modo efficiente.
Grafo dei moduli
Il bundler parte da un punto di ingresso e segue ogni import per creare un grafo dei moduli, cioè una mappa completa di tutto il codice utilizzato dall'app. Questo grafo è alla base di tutte le ottimizzazioni.
Tree shaking — Eliminazione del codice morto
Tree shaking analizza il grafo dei moduli e rimuove gli export che non vengono mai importati. Solo gli import statici dei moduli ES consentono il tree shaking: CommonJS require() è dinamico e non può essere analizzato staticamente.
// utils.js
export const add = (a, b) => a + b; // used → included
export const multiply = (a, b) => a * b; // never imported → removed
// app.js
import { add } from './utils.js';
console.log(add(2, 3));Effetti collaterali e sideEffects: false
Se la libreria non produce effetti collaterali (solo riesportazioni pure), aggiunga "sideEffects": false a package.json. Questo indica ai bundler che possono rimuovere in sicurezza qualsiasi file del pacchetto che non viene importato.
// package.json of a library:
{
"sideEffects": false
// or list files with side effects:
"sideEffects": ["./src/polyfills.js"]
}Code splitting
Il code splitting suddivide il bundle in più chunk caricati su richiesta. Il chunk principale rimane piccolo per velocizzare il caricamento iniziale. I chunk secondari vengono caricati solo quando servono (route lazy, attivatori di funzionalità).
Suddivisione dei punti di ingresso
Le applicazioni multipagina hanno più punti di ingresso, ognuno dei quali produce il proprio bundle. Il codice condiviso, ad esempio React, viene estratto automaticamente in un chunk condiviso.
Suddivisione degli import dinamici
Ogni chiamata dinamica a import() crea un punto di suddivisione. Il bundler genera un chunk separato per il modulo caricato su richiesta e per tutte le sue dipendenze esclusive.
// vite / rollup automatically creates a separate chunk:
const Admin = lazy(() => import('./Admin'));
const Reports = lazy(() => import('./Reports'));Creazione dei chunk vendor
Il codice di node_modules cambia raramente. Lo estragga in un chunk vendor con un TTL della cache lungo. Gli utenti che hanno memorizzato nella cache il chunk vendor devono riscaricare solo il chunk dell'app quando vengono eseguiti aggiornamenti.
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: { vendor: ['react', 'react-dom'] }
}
}
}Minimizzazione
I minificatori (esbuild, terser) rimuovono gli spazi bianchi, rinominano le variabili con lettere singole e applicano altre riduzioni. Una tipica app React si riduce del 60–70% dopo la minimizzazione.
Hash basato sul contenuto
I bundler aggiungono al nome del file un hash del suo contenuto: index-a1b2c3.js. Quando il contenuto cambia, cambia anche l'hash e quindi il nome del file; il browser scarica il nuovo file. I chunk invariati vengono memorizzati nella cache indefinitamente.
Source map
Le source map riconducono l'output minimizzato al codice sorgente originale. Vengono generate separatamente (non vengono inviate agli utenti) e utilizzate da DevTools per il debug. Le abiliti con build.sourcemap: true.
Verifica rapida
Qual è il requisito principale perché il tree shaking funzioni?
Riepilogo: concetti di bundling
I bundler risolvono il grafo dei moduli, applicano il tree shaking agli export inutilizzati (richiede ESM statico), suddividono il codice in chunk per il caricamento lazy, estraggono il codice vendor per la memorizzazione nella cache, minimizzano l'output e aggiungono hash basati sul contenuto per invalidare la cache. Le source map consentono il debug del codice minimizzato.
Domande Frequenti
La lezione «Concetti di bundling: tree shaking e code splitting» è gratuita?
Sì — il testo completo di «Concetti di bundling: tree shaking e 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Concetti di bundling: tree shaking e code splitting»?
Comprendere come i bundler rimuovono gli export inutilizzati tramite tree shaking e suddividono l’output in chunk per velocizzare il caricamento iniziale delle pagine. Eserciti Frontend 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 Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend 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 4 di 4.
Quanto tempo richiede la lezione «Concetti di bundling: tree shaking e 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 Frontend Academy?
Sì. Ogni lezione Frontend 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
- Moduli ES: import, export e import dinamico
- npm e package.json: dipendenze e script
- Vite: server di sviluppo e build
- Concetti di bundling: tree shaking e code splitting