Verzögertes Laden mit @defer

Der at-defer-Block lädt einen Teil eines Templates und dessen Abhängigkeiten verzögert, wodurch die Leistung beim initialen Laden verbessert wird. Der verzögerte Inhalt wird in einen separaten Chunk aufgeteilt.

Umschließen Sie den Inhalt mit einem at-defer-Block. Standardmäßig wird er geladen, sobald der Browser im Leerlauf ist.

Wenn Sie umfangreiche oder unterhalb des sichtbaren Bereichs liegende Komponenten verzögert laden, bleibt das initiale Bundle klein und der erste Bildaufbau schnell. Die Komponente wird erst geladen, wenn sie tatsächlich benötigt wird.

Ein at-placeholder-Block zeigt Inhalte an, bevor der zurückgestellte Block ausgelöst wird.

Ein at-loading-Block wird angezeigt, während der zurückgestellte Chunk geladen wird.

Ein at-error-Block wird gerendert, wenn das Laden der zurückgestellten Abhängigkeiten fehlschlägt.

Sie steuern mit Triggern in einer on-Klausel, wann das Laden beginnt, zum Beispiel mit on idle, on viewport, on interaction, on hover oder on timer.

Der Trigger on viewport lädt die Inhalte, sobald sie beim Scrollen sichtbar werden – ideal für Abschnitte unterhalb des sichtbaren Bereichs.

on interaction lädt die Inhalte, wenn der Benutzer auf den Platzhalter klickt oder ihn fokussiert; on hover lädt sie, sobald der Mauszeiger darüber schwebt.

Sie können das Laden auch mit einem booleschen Ausdruck und when auslösen. Geladen wird, sobald der Ausdruck den Wert true annimmt.

Sie können den zurückgestellten Chunk unabhängig vom Rendern vorab laden, zum Beispiel mit prefetch on idle. Dadurch ist er bereit, bevor der Render-Trigger ausgelöst wird.

Zurückgestellte Inhalte auslösen.

Sie haben den at-defer-Block für Lazy Loading kennengelernt, einschließlich der Blöcke at-placeholder, at-loading und at-error sowie Triggern wie on idle, on viewport, on interaction, on hover, on timer und when. Außerdem haben Sie Prefetching kennengelernt. Damit haben Sie den Kurs „Integrierter Kontrollfluss“ abgeschlossen.