Leniwe ładowanie komponentów
Odrocz renderowanie niekrytycznych komponentów, używając importów dynamicznych i obserwatorów przecięcia.
Leniwe ładowanie komponentów to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Dlaczego ładować leniwie
Odrocz ładowanie ciężkich lub niekrytycznych komponentów, aby zmniejszyć początkowy rozmiar pakietu.
Dynamiczny import
Użyj import(), aby asynchronicznie załadować moduł.
let Component;
onMount(async () => {
Component = (await import("./Heavy.svelte")).default;
});Renderowanie po załadowaniu
Użyj <svelte:component>, aby wyrenderować dynamiczny komponent.
{#if Component}
<svelte:component this={Component} />
{/if}Intersection Observer
Połącz go z IntersectionObserver, aby rozpocząć ładowanie, gdy element zastępczy pojawi się w obszarze widocznym.
Opakowanie akcji
Zbuduj wielokrotnego użytku akcję use:lazy, aby ukryć szczegóły tego wzorca.
Stan ładowania
Wyświetl szkielet lub wskaźnik ładowania do czasu pojawienia się komponentu.
Zastosowanie poniżej obszaru widocznego
Komentarze, powiązane wpisy i widżety stopki to przykłady elementów, które można ładować leniwie.
Zyski wydajności
Zmniejsza ilość początkowego kodu JavaScript i przyspiesza TTI, szczególnie na urządzeniach mobilnych.
Wstępne pobieranie
Opcjonalnie wstępnie ładuj moduły po najechaniu kursorem lub w pobliżu obszaru widocznego, aby przyspieszyć interakcje.
Unikaj nadmiernego dzielenia
W przypadku małych komponentów narzut dynamicznego importu przewyższa uzyskane oszczędności.
Połączenie ze strumieniowaniem
W przypadku stron renderowanych po stronie serwera strumieniowanie i leniwe nawadnianie zapewniają szybkie początkowe renderowanie.
Szybki test
Jak renderuje się komponent zaimportowany dynamicznie?
Podsumowanie
Ładuj leniwie ciężkie komponenty za pomocą dynamicznego importu i svelte:component, opcjonalnie uruchamiając ładowanie po wykryciu przecięcia z obszarem widocznym.
Często zadawane pytania
Czy lekcja „Leniwe ładowanie komponentów” jest bezpłatna?
Tak — pełny tekst „Leniwe ładowanie komponentów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Leniwe ładowanie komponentów”?
Odrocz renderowanie niekrytycznych komponentów, używając importów dynamicznych i obserwatorów przecięcia. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Leniwe ładowanie komponentów”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?
Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Dzielenie kodu i importy dynamiczne
- Optymalizacja obrazów za pomocą @sveltejs/enhanced-img
- Leniwe ładowanie komponentów
- Profilowanie aplikacji SvelteKit