Caricamento differito con @defer

Il blocco @defer carica in modo differito una parte del template e le relative dipendenze, migliorando le prestazioni del caricamento iniziale. Il contenuto differito viene suddiviso in un chunk separato.

Racchiuda il contenuto in un blocco @defer. Per impostazione predefinita, viene caricato quando il browser è inattivo.

Rimandare i componenti pesanti o sotto la piega mantiene ridotte le dimensioni del bundle iniziale e velocizza il primo rendering. Il componente viene caricato solo quando serve effettivamente.

Un blocco at-placeholder mostra il contenuto prima che venga attivato il blocco differito.

Un blocco at-loading viene mostrato mentre viene recuperato il blocco differito.

Un blocco at-error viene visualizzato se il caricamento delle dipendenze differite non riesce.

È possibile controllare quando inizia il caricamento usando i trigger in una clausola on, ad esempio on idle, on viewport, on interaction, on hover o on timer.

Il trigger on viewport carica il contenuto quando entra nell'area visibile, risultando ideale per le sezioni sotto la piega.

on interaction carica il contenuto quando l'utente fa clic sul segnaposto o vi porta il focus; on hover lo carica quando il puntatore vi passa sopra.

È anche possibile attivare il caricamento in base a un'espressione booleana usando when; il caricamento avviene quando l'espressione diventa true.

È possibile precaricare il blocco differito separatamente dal rendering, ad esempio con prefetch on idle, in modo che sia pronto prima dell'attivazione del trigger di rendering.

Attivazione del contenuto differito.

Ha imparato a usare il blocco at-defer per il caricamento lazy, con i blocchi at-placeholder, at-loading e at-error e trigger come on idle, on viewport, on interaction, on hover, on timer e when, oltre al precaricamento. Ha completato il corso sul flusso di controllo integrato.