Come ridurre la dimensione del tuo bundle JavaScript del 70%

La maggior parte delle applicazioni web distribuisce troppo codice. Una pagina web media carica 1,7 MB di JavaScript. Gli sviluppatori utilizzano solo circa il 35% del codice che distribuiscono.

Bundle piccoli migliorano i tuoi Core Web Vitals. Otterrai punteggi migliori per Largest Contentful Paint e Time to Interactive.

Segui questi 10 passaggi per ridurre la dimensione del tuo bundle:

  • Tree shaking: rimuove il codice non utilizzato. Usa la sintassi ES Module per farlo funzionare.
  • Code splitting: suddivide il codice in parti più piccole.
  • Dynamic imports: carica il codice solo quando l'utente ne ha bisogno.
  • Image optimization: usa trasformazioni basate su URL invece di librerie pesanti.
  • Dependency auditing: sostituisci le librerie pesanti con quelle leggere.
  • Minification: riduci la dimensione dei file di codice.
  • Compression: usa Brotli per ottenere risultati migliori rispetto a Gzip.
  • Dead code elimination: rimuovi i rami di codice irraggiungibili.
  • Lazy loading: rimanda il caricamento dei componenti non critici.
  • Polyfill pruning: distribuisci solo i polyfill di cui i tuoi utenti hanno bisogno.

Tre tecniche funzionano meglio se combinate. Lazy loading, polyfill pruning ed eliminazione del codice morto possono ridurre la dimensione del 15-30%.

Effettua un audit delle tue dipendenze prima di installarle. Usa npx bundle-phobia per controllarne le dimensioni.

Per esempio: • date-fns (13KB) è migliore di moment.js (67KB). • dayjs (2KB) è un'ottima alternativa per la formattazione delle date. • Usa lodash-es invece della libreria lodash completa.

Controlla i tuoi progressi con questi obiettivi: • Dimensione totale JS: punta a meno di 120 KB. • LCP: punta a meno di 2,5s. • TTI: punta a meno di 3,5s.

Evita questi errori: • Distribuire build di sviluppo invece di build di produzione. • Importare intere librerie quando ti serve solo una funzione. • Dimenticare di abilitare la compressione Brotli sul server.

Se utilizzi tree shaking, code splitting e l'audit delle dipendenze, puoi ridurre il payload del 50-70% in uno sprint.

Fonte: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g