𝗦𝗽𝗲𝗴𝗶𝗮𝘇𝗶𝗼𝗻𝗲 𝗱𝗲𝗹 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝘂𝗻𝗱𝗹𝗶𝗻𝗴

Scrivi app React o Angular utilizzando molti file. Usi componenti, servizi e librerie.

I browser faticano a gestire molti file. Caricare 200 file significa effettuare 200 richieste di rete. Questo rende la tua app lenta.

I bundler risolvono questo problema. Prendono il tuo codice e le sue importazioni e li combinano in uno o pochi file piccoli. Questo rende il caricamento efficiente.

I bundler moderni fanno molto più che combinare file. Svolgono questi compiti:

  • Minificazione: rimuovono spazi e commenti. Accorciano i nomi delle variabili per risparmiare spazio.
  • Tree shaking: rimuovono il codice che non utilizzi.
  • Code splitting: dividono il codice in piccoli frammenti (chunk). Gli utenti caricano solo ciò di cui hanno bisogno.

File più piccoli portano ad app più veloci.

Esistono due strumenti principali: Webpack e Vite.

Webpack impacchetta l'intera app prima di servirla. È potente e flessibile. Può risultare lento nei progetti di grandi dimensioni perché ricrea il bundle di tutto ad ogni modifica.

Vite è una scelta moderna. Serve i file direttamente durante lo sviluppo utilizzando i moduli ES nativi. Aggiorna solo il file che modifichi. Questo rende gli aggiornamenti istantanei.

Confronto:

Webpack:

  • Velocità di sviluppo: Più lenta
  • Configurazione: Complessa
  • Ideale per: Grandi progetti legacy

Vite:

  • Velocità di sviluppo: Veloce
  • Configurazione: Semplice
  • Ideale per: Nuovi progetti moderni

Usa Vite per i nuovi progetti.

Ogni bundler segue tre passaggi:

  1. Costruzione di un grafo delle dipendenze: il bundler mappa come i file sono collegati tra loro.
  2. Trasformazione del codice: converte TypeScript o JSX in JavaScript puro.
  3. Generazione del bundle: scrive i file finali in una cartella per il deployment.

Mantieni il tuo bundle leggero con questi consigli:

  • Lazy loading: carica i componenti solo quando l'utente ne ha bisogno.
  • Import specifici: non importare intere librerie. Importa solo le funzioni specifiche che utilizzi.
  • Analizza il tuo bundle: usa degli strumenti per vedere quali file occupano più spazio.
  • Usa build di produzione: distribuisci sempre build di produzione invece di quelle di sviluppo.

I bundler rendono le tue app più veloci fornendo meno file e più piccoli.

Fonte: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p