Odroczone ładowanie za pomocą @defer

Blok at-defer ładuje leniwie część szablonu wraz z zależnościami, poprawiając wydajność początkowego ładowania. Odroczona zawartość jest dzielona na osobny chunk.

Zawartość należy umieścić w bloku at-defer. Domyślnie zostanie on załadowany, gdy przeglądarka będzie bezczynna.

Odroczenie ładowania ciężkich komponentów lub komponentów znajdujących się poniżej pierwszego ekranu pozwala zmniejszyć początkowy bundle i przyspieszyć pierwsze renderowanie. Komponent zostanie załadowany dopiero wtedy, gdy będzie rzeczywiście potrzebny.

Blok at-placeholder wyświetla zawartość, zanim zostanie uruchomiony blok odroczony.

Blok at-loading jest wyświetlany podczas pobierania odroczonego fragmentu.

Blok at-error jest renderowany, jeśli pobranie zależności odroczonego fragmentu zakończy się niepowodzeniem.

Moment rozpoczęcia ładowania można kontrolować za pomocą wyzwalaczy w klauzuli on, takich jak on idle, on viewport, on interaction, on hover lub on timer.

Wyzwalacz on viewport ładuje zawartość, gdy pojawi się ona w obszarze widoku podczas przewijania. Doskonale sprawdza się w sekcjach znajdujących się poniżej widocznej części strony.

on interaction ładuje zawartość, gdy użytkownik kliknie element zastępczy lub przeniesie na niego fokus, a on hover — gdy wskaźnik znajdzie się nad tym elementem.

Można również uruchamiać ładowanie na podstawie wyrażenia logicznego za pomocą when. Ładowanie rozpocznie się, gdy wyrażenie przyjmie wartość true.

Odroczony fragment można pobrać wstępnie niezależnie od renderowania, na przykład za pomocą prefetch on idle, aby był gotowy, zanim zadziała wyzwalacz renderowania.

Uruchamianie odroczonej zawartości.

Poznali Państwo blok at-defer używany do leniwego ładowania, a także bloki at-placeholder, at-loading i at-error oraz wyzwalacze, takie jak on idle, on viewport, on interaction, on hover, on timer i when, a także wstępne pobieranie. Ukończyli Państwo kurs Built-in Control Flow.