HTML Academy · Lekcja

Dynamiczny import() w modułach

Ładowanie modułów na żądanie za pomocą dynamicznego import()

Dynamiczny import() w modułach to bezpłatna lekcja HTML 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 HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Wyrażenie import()

W przeciwieństwie do statycznej deklaracji import, import("./module.js") jest wyrażeniem, które zwraca Promise rozstrzygany do przestrzeni nazw modułu. Działa w dowolnym miejscu — wewnątrz funkcji, warunków, a nawet w skryptach niebędących modułami.

Dzielenie kodu

Dynamiczny import jest podstawowym mechanizmem dzielenia kodu. Procedura obsługi trasy może odroczyć ładowanie kodu trasy do momentu, gdy użytkownik przejdzie na daną trasę: const mod = await import("./routes/admin.js"). Bajty trasy nie zostaną pobrane, dopóki nie będą potrzebne.

document.getElementById("settings-btn").addEventListener("click", async () => {
  const { renderSettings } = await import("./settings.js");
  renderSettings();
});

Zwracana przestrzeń nazw modułu

Wartością po rozstrzygnięciu jest przestrzeń nazw modułu — obiekt, którego właściwościami są eksporty modułu. Eksporty nazwane można destrukturyzować bezpośrednio, a do eksportu domyślnego odwoływać się za pomocą module.default.

Obsługa błędów

Ponieważ import() zwraca promise, błędy wynikające z nieudanego pobrania lub błędu składni są przekazywane do .catch(). Dynamiczne importy należy opakować w try/catch (w funkcjach asynchronicznych) lub użyć .catch(), aby poprawnie obsługiwać awarie sieci.

try {
  const mod = await import("./optional.js");
  mod.run();
} catch (e) {
  console.warn("Optional module failed", e);
}

Ładowanie warunkowe

Polyfill należy ładować tylko w starszych przeglądarkach: if (!window.IntersectionObserver) await import("intersection-observer-polyfill"). Nowoczesne przeglądarki całkowicie pomijają te bajty, a starsze ponoszą ten koszt tylko wtedy, gdy jest to potrzebne.

Rozwiązywanie specyfikatorów

Specyfikator podlega tym samym regułom co import statyczny: może być względnym lub bezwzględnym adresem URL albo nazwą bezpośrednią zmapowaną za pomocą mapy importów. Działają również dynamiczne ciągi znaków: import(`./locales/${lang}.js`), choć bundlery mogą mieć trudności z dzieleniem takiego kodu.

Buforowanie

Każdy unikalny specyfikator jest rozwiązywany do tej samej instancji modułu. Drugi import("./mod.js") zwraca już załadowany moduł bez ponownego żądania sieciowego, dzięki czemu można bezpiecznie używać dynamicznego importu w procedurach obsługi zdarzeń bez obaw o wielokrotne pobieranie.

Dynamiczny import na najwyższym poziomie

W module można użyć await na najwyższym poziomie wraz z dynamicznym importem, aby opóźnić wykonanie do momentu udostępnienia asynchronicznie załadowanego pomocnika. Jest to przydatne w systemach wtyczek, w których lista wtyczek jest znana dopiero w czasie działania.

// module.js
const { plugin } = await import(`./plugins/${process.env.PLUGIN}.js`);
plugin.init();

Użycie z React.lazy i Preact

React.lazy, Preact's `lazy` from preact/compat oraz defineAsyncComponent z Vue opakowują dynamiczny import na potrzeby dzielenia kodu na poziomie komponentów. Natywnym mechanizmem przeglądarki jest import(), a frameworki dodają nad nim granice ładowania przypominające suspense.

Dzielenie kodu w Webpack i Vite

Bundlery rozpoznają w kodzie źródłowym import("...") i generują osobny fragment dla importowanego modułu. Procedura uruchomieniowa pobiera ten fragment przy pierwszym wywołaniu. Autor zapisuje import() zgodny ze specyfikacją ES, a bundler tworzy całą obsługę żądań sieciowych.

Częsty błąd

Wywoływanie import("X") w często wykonywanej ścieżce (na przykład wewnątrz pętli renderowania) przy każdym wywołaniu ponownie sprawdza pamięć podręczną. Choć moduł nie jest pobierany ponownie, samo wyszukiwanie wiąże się z narzutem. Po pierwszym imporcie należy zapisać rozstrzygniętą przestrzeń nazw w zmiennej.

Sprawdzenie wiedzy

Co zwraca import("./mod.js")?

Podsumowanie

Dynamiczny import() jest używanym na żądanie odpowiednikiem statycznej deklaracji import. Zwraca Promise rozstrzygany do przestrzeni nazw modułu, umożliwiając dzielenie kodu, warunkowe ładowanie polyfilli i tworzenie systemów wtyczek. Moduły są buforowane po pierwszym imporcie, więc kolejne wywołania nic nie kosztują. Bundlery generują osobne fragmenty dla każdego wywołania dynamicznego importu.

Często zadawane pytania

Czy lekcja „Dynamiczny import() w modułach” jest bezpłatna?

Tak — pełny tekst „Dynamiczny import() w modułach” 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 HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Dynamiczny import() w modułach”?

Ładowanie modułów na żądanie za pomocą dynamicznego import() Ćwiczysz HTML 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ąć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML 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 „Dynamiczny import() w modułach”?

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 HTML Academy?

Tak. Każda lekcja HTML 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

← Powrót do HTML Academy