Wskazówki dotyczące zasobów — modulepreload
Wstępne ładowanie modułów ES w celu szybszego uruchamiania JavaScript
Wskazówki dotyczące zasobów — modulepreload to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 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.
Dlaczego istnieje modulepreload
Moduły ES tworzą graf zależności: moduł wejściowy importuje inne moduły, które importują kolejne. Bez dodatkowej pomocy każdy poziom drzewa jest wykrywany dopiero po sparsowaniu poprzedniego poziomu, co tworzy sekwencyjny wodospad znacząco pogarszający wydajność ładowania.
Działanie modulepreload
<link rel="modulepreload" href="/app.js"> informuje przeglądarkę, aby natychmiast i równolegle pobrała moduł ORAZ wszystkie moduły importowane przez niego pośrednio. Zanim zostanie uruchomiony element <script type="module">, cały graf znajduje się już w pamięci podręcznej.
W porównaniu z preload
preload również pobiera pliki równolegle, ale nie rozpoznaje instrukcji import — wstępne załadowanie pliku modułu nie powoduje wstępnego załadowania jego zależności. modulepreload automatycznie podąża za importami i właśnie na tym polega jego sens.
<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>Gdzie umieścić modulepreload
W elemencie <head>, możliwie wcześnie. Przeglądarka natychmiast rozpoczyna żądanie wstępnego ładowania i nadal analizuje kod HTML. Zanim napotka pasujący element <script type="module"> znajdujący się dalej w dokumencie, plik jest już w pamięci.
Wykrywanie i przechodzenie po grafie
Przeglądarka analizuje wstępnie załadowany moduł w poszukiwaniu instrukcji import, a następnie rekurencyjnie wysyła równoległe żądania pobrania dla każdego zaimportowanego URL-a. Użytkownik ponosi koszt jednej podróży w obie strony na każdy poziom, ale zyskuje równoległość w obrębie każdego poziomu, co znacząco skraca ścieżkę krytyczną.
Używanie z bundlerami
Nowoczesne bundlery (Vite, Rollup, Webpack 5+) automatycznie generują znaczniki modulepreload dla fragmentów kodu utworzonych przez podział kodu. W aplikacjach tworzonych ręcznie należy generować je podczas budowania na podstawie grafu importów, aby lista pozostawała aktualna po dodaniu lub usunięciu modułów.
Uwagi dotyczące CrossOrigin
W przypadku wstępnego ładowania modułów z innych źródeł należy dołączyć crossorigin="anonymous". Odpowiada to domyślnemu trybowi pobierania elementu <script type="module">, dzięki czemu wstępnie załadowana kopia zostanie ponownie użyta zamiast pobrana ponownie bez nagłówków CORS.
Obsługa przeglądarek
Mechanizm modulepreload jest obsługiwany w Chrome, Edge i Safari oraz w nowszych wersjach Firefoksa. W starszym Firefoxie jest po cichu ignorowany — moduły nadal działają, tylko bez korzyści z wstępnego ładowania. Polyfill nie jest potrzebny; w najgorszym razie ładowanie będzie nieco wolniejsze w nieaktualnych przeglądarkach.
Ograniczanie rozmiaru grafu
Wstępne ładowanie setek modułów marnuje przepustowość na kod, którego użytkownik może nigdy nie uruchomić. Należy wstępnie ładować tylko fragmenty wejściowe na poziomie tras, a nie te ładowane głęboko na żądanie. W przypadku rzadko używanych ścieżek kodu należy użyć prefetch lub importować kod na żądanie.
Łączenie z innymi wskazówkami
W przypadku obrazów i czcionek znajdujących się w tym samym headzie można swobodnie łączyć różne mechanizmy: preconnect dla zewnętrznych CDN-ów, preload dla krytycznych czcionek, modulepreload dla modułów wejściowych oraz prefetch dla zasobów następnej strony. Wskazówki nie kolidują ze sobą.
Weryfikacja
Należy sprawdzić panel Network: przy użyciu modulepreload importy drugiego poziomu pojawiają się jako równoległe żądania rozpoczynające się niemal jednocześnie z żądaniem modułu wejściowego. Bez niego są rozłożone w czasie, a każde żądanie zaczyna się dopiero po zakończeniu analizowania elementu nadrzędnego.
Sprawdzenie wiedzy
Co robi modulepreload, czego nie robi zwykły preload tego samego pliku modułu?
Podsumowanie
modulepreload eliminuje wodospad modułów ES, pobierając moduł wejściowy i jego importy równolegle, jeszcze przed uruchomieniem. Należy umieścić go wcześnie w <head>, generować na podstawie grafu budowania, ustawić crossorigin dla modułów z innych źródeł oraz ograniczyć zakres do punktów wejściowych tras, aby uniknąć marnowania przepustowości.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „Wskazówki dotyczące zasobów — modulepreload” jest bezpłatna?
Tak — pełny tekst „Wskazówki dotyczące zasobów — modulepreload” 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 „Wskazówki dotyczące zasobów — modulepreload”?
Wstępne ładowanie modułów ES w celu szybszego uruchamiania JavaScript Ć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 4 z 4.
Ile czasu zajmuje lekcja „Wskazówki dotyczące zasobów — modulepreload”?
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
- Atrybuty async i defer
- Preload, prefetch i preconnect
- Leniwe ładowanie obrazów — loading=lazy
- Wskazówki dotyczące zasobów — modulepreload