Dzielenie kodu i importy dynamiczne
Dziel automatycznie bundle według tras i używaj dynamicznego import() do ładowania fragmentów na żądanie.
Dzielenie kodu i importy dynamiczne to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 1 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.
Automatyczne dzielenie kodu
SvelteKit automatycznie dzieli pakiety według tras. Odwiedzający pobierają tylko kod JavaScript potrzebny dla odwiedzanych tras.
Dynamiczny import
Aby uzyskać bardziej szczegółowy podział, użyj dynamicznego import() do ładowania modułów na żądanie.
const Heavy = (await import("./Heavy.svelte")).default;Ładowanie warunkowe
Ciężką bibliotekę ładuj tylko wtedy, gdy wymaga tego konkretne działanie użytkownika.
async function openEditor() {
const { default: Editor } = await import("./Editor.svelte");
// ...
}Nazewnictwo fragmentów
Vite inteligentnie nadaje nazwy fragmentom. W razie potrzeby możesz użyć komentarzy w stylu webpackChunkName, aby przekazać wskazówkę.
Wstępne ładowanie
Użyj data-sveltekit-preload-code, aby wstępnie załadować kod trasy po najechaniu kursorem.
Rozmiar pakietu
Mniejsze pakiety początkowe oznaczają szybsze ładowanie stron i lepsze wyniki Core Web Vitals.
Tree-shaking
SvelteKit (za pośrednictwem Vite/Rollup) automatycznie usuwa nieużywane eksporty.
Komponenty ładowane leniwie
Opakuj dynamiczne importy w komponentach, które są renderowane po ich załadowaniu.
Pułapki
Dynamiczne importy wprowadzają asynchroniczne granice. Zadbaj o odpowiednią obsługę stanów ładowania.
Analiza pakietu
Użyj wizualizatorów pakietu, aby określić, co warto podzielić w następnej kolejności.
Kiedy nie dzielić kodu
W przypadku niewielkich modułów koszt podziału przewyższa uzyskane oszczędności. Wykonaj profilowanie, aby znaleźć właściwy poziom szczegółowości.
Szybki test
Jak SvelteKit domyślnie dzieli pakiety?
Podsumowanie
Dzielenie kodu w SvelteKit odbywa się automatycznie według tras. Użyj dynamicznego import(), aby uzyskać dokładniejsze leniwe ładowanie.
Często zadawane pytania
Czy lekcja „Dzielenie kodu i importy dynamiczne” jest bezpłatna?
Tak — pełny tekst „Dzielenie kodu i importy dynamiczne” 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 „Dzielenie kodu i importy dynamiczne”?
Dziel automatycznie bundle według tras i używaj dynamicznego import() do ładowania fragmentów na żądanie. Ć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 1 z 4.
Ile czasu zajmuje lekcja „Dzielenie kodu i importy dynamiczne”?
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