Vue Academy · Lezione

Caricamento lazy e suddivisione del codice

Suddivida i bundle e carichi componenti e route in modalità lazy.

Caricamento lazy e suddivisione del codice è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 3. 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 3 lezioni in totale.

Perché le dimensioni del bundle sono importanti

Quando tutto viene distribuito in un unico grande file JavaScript, gli utenti devono attendere più a lungo prima di visualizzare la prima schermata. Il code splitting divide l'app in blocchi più piccoli, caricati solo quando servono, riducendo il download iniziale e velocizzando l'avvio.

import() dinamico

Lo strumento principale è la funzione import() dinamica. A differenza di un import statico all'inizio di un file, carica un modulo su richiesta e restituisce una promise. I bundler dividono ogni import dinamico in un blocco separato.

const module = await import("./heavyModule.js")
module.doSomething()

Code splitting a livello di route

Il vantaggio maggiore si ottiene dividendo il codice per route, in modo che ogni pagina carichi il proprio codice. In Vue Router, passi una funzione che restituisce un import dinamico invece di importare direttamente il componente.

const routes = [
  {
    path: "/dashboard",
    component: () => import("./views/Dashboard.vue")
  }
]

Route statiche e lazy

Confronti i due approcci. L'import statico include il componente nel blocco principale; la versione lazy crea un blocco separato, recuperato solo quando viene visitata la route.

// eager (always loaded)
import Dashboard from "./views/Dashboard.vue"

// lazy (loaded on demand)
const Dashboard = () => import("./views/Dashboard.vue")

defineAsyncComponent

Per caricare in modalità lazy un componente esterno al router, racchiuda un import dinamico in defineAsyncComponent. Vue lo carica solo quando viene renderizzato per la prima volta.

import { defineAsyncComponent } from "vue"

const Chart = defineAsyncComponent(() =>
  import("./components/HeavyChart.vue")
)

Registrazione dei componenti asincroni

Registri un componente asincrono come qualsiasi altro componente e lo utilizzi nel template. Vue gestisce il caricamento in modo trasparente.

export default {
  components: {
    HeavyChart: defineAsyncComponent(() =>
      import("./components/HeavyChart.vue")
    )
  }
}

Stati di caricamento ed errore

La forma avanzata di defineAsyncComponent accetta opzioni per mostrare un segnaposto durante il caricamento e un contenuto alternativo in caso di errore.

const Chart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: Spinner,
  errorComponent: LoadError,
  delay: 200,
  timeout: 5000
})

Caricamento lazy dei componenti pesanti

Buoni candidati per il caricamento lazy sono gli elementi pesanti o usati raramente: grafici, editor di testo avanzato, mappe o finestre modali che solo alcuni utenti aprono.

const RichEditor = defineAsyncComponent(() =>
  import("./components/RichTextEditor.vue")
)
// only downloaded when the editor is actually shown

Caricamento condizionale con v-if

Abbini un componente asincrono a v-if, così il relativo blocco viene recuperato solo quando l'utente lo attiva.

<template>
  <button @click="showEditor = true">Edit</button>
  <RichEditor v-if="showEditor" />
</template>

Nomi dei blocchi per il debugging

I commenti speciali in stile Webpack assegnano nomi leggibili ai blocchi, rendendo più semplice analizzare la scheda di rete e l'output della build.

const Reports = () => import(
  /* webpackChunkName: "reports" */ "./views/Reports.vue"
)

Misurare l'impatto

Dopo la suddivisione, controlli l'output della build o la scheda Rete del browser. Dovrebbe vedere diversi file di chunk più piccoli invece di un unico bundle di grandi dimensioni, e il caricamento iniziale dovrebbe scaricare meno codice.

Verifica rapida

Verifichi la Sua conoscenza del caricamento lazy.

Riepilogo

La suddivisione del codice con import() dinamico riduce il bundle iniziale. Utilizzi una funzione che restituisce un import per le route lazy e defineAsyncComponent per i componenti caricati su richiesta, eventualmente con stati di caricamento ed errore. Carichi in modo lazy le parti pesanti o usate raramente per mantenere rapido l'avvio. Ora imparerà a memorizzare nella cache ed evitare il lavoro non necessario con la memoizzazione.

Domande Frequenti

La lezione «Caricamento lazy e suddivisione del codice» è gratuita?

Sì — il testo completo di «Caricamento lazy e suddivisione del codice» è 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 Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 3 lezioni in totale.

Cosa imparerò in «Caricamento lazy e suddivisione del codice»?

Suddivida i bundle e carichi componenti e route in modalità lazy. Eserciti Vue 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 Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue 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 1 di 3.

Quanto tempo richiede la lezione «Caricamento lazy e suddivisione del codice»?

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 Vue Academy?

Sì. Ogni lezione Vue 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

Caricamento lazy e suddivisione del codice
Tecniche di memoizzazione
Individuazione e risoluzione dei colli di bottiglia

← Torna a Vue Academy