Code splitting e import dinamici
Divida automaticamente il bundle in base alle route e usi import() dinamici per caricare i blocchi su richiesta.
Code splitting e import dinamici è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 1 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 Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.
Suddivisione automatica
SvelteKit suddivide automaticamente i bundle per route. I visitatori scaricano solo il JavaScript delle route che visitano.
Importazione dinamica
Per una suddivisione più granulare, utilizzi import() per caricare i moduli on demand.
const Heavy = (await import("./Heavy.svelte")).default;Caricamento condizionale
Carichi una libreria pesante solo quando una specifica azione dell'utente lo richiede.
async function openEditor() {
const { default: Editor } = await import("./Editor.svelte");
// ...
}Denominazione dei chunk
Vite assegna nomi intelligenti ai chunk. Se necessario, può suggerire un nome con commenti nello stile di webpackChunkName.
Precaricamento
Utilizzi data-sveltekit-preload-code per precaricare il codice della route al passaggio del mouse.
Dimensione del bundle
Bundle iniziali più piccoli significano caricamenti delle pagine più rapidi e valori migliori per i Core Web Vitals.
Tree-shaking
SvelteKit, tramite Vite/Rollup, rimuove automaticamente gli export inutilizzati con il tree-shaking.
Componenti lazy
Racchiuda le importazioni dinamiche in componenti che eseguono il rendering dopo il caricamento.
Problemi comuni
Le importazioni dinamiche aggiungono confini asincroni. Gestisca con cura gli stati di caricamento.
Analisi del bundle
Utilizzi i visualizzatori dei bundle per individuare cosa suddividere successivamente.
Quando non suddividere
Per i moduli molto piccoli, il costo della suddivisione supera il risparmio. Esegua un profiling per trovare il livello di granularità corretto.
Verifica rapida
In che modo SvelteKit suddivide i bundle per impostazione predefinita?
Riepilogo
In SvelteKit la suddivisione del codice è automatica per route. Utilizzi import() dinamico per un lazy loading più granulare.
Domande Frequenti
La lezione «Code splitting e import dinamici» è gratuita?
Sì — il testo completo di «Code splitting e import dinamici» è 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 Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.
Cosa imparerò in «Code splitting e import dinamici»?
Divida automaticamente il bundle in base alle route e usi import() dinamici per caricare i blocchi su richiesta. Eserciti Sveltejs 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 Sveltejs Academy?
Non è richiesta alcuna esperienza precedente. Sveltejs 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 4.
Quanto tempo richiede la lezione «Code splitting e import dinamici»?
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 Sveltejs Academy?
Sì. Ogni lezione Sveltejs 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
- Code splitting e import dinamici
- Ottimizzazione delle immagini con @sveltejs/enhanced-img
- Caricamento differito dei componenti
- Profilazione delle app SvelteKit