0Pricing
Web Performance Optimization & Lighthouse · Lekcja

Dzielenie kodu i leniwe ładowanie

Dziel duże pakiety JavaScript na fragmenty ładowane na żądanie za pomocą importów dynamicznych i podziału według tras, aby użytkownicy pobierali tylko potrzebny kod.

Dzielenie kodu i leniwe ładowanie to bezpłatna lekcja Web Performance Optimization & Lighthouse 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 Web Performance Optimization & Lighthouse, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Performance Optimization & Lighthouse zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

The Monolithic Bundle Problem

Shipping all JavaScript in one bundle forces users to download code for pages they may never visit. Code splitting breaks the bundle into smaller chunks loaded only when needed.

Dynamic import()

The dynamic import() expression returns a promise and tells bundlers to create a separate chunk. The module loads on demand at runtime.

button.addEventListener('click', async () => {
  const { renderChart } = await import('./chart.js');
  renderChart();
});

Route-Based Splitting

The most impactful split is per route: each page becomes its own chunk, so the initial load contains only the landing route.

const Dashboard = React.lazy(() => import('./pages/Dashboard'));

Suspense Fallbacks

While a lazy chunk loads, show a fallback so the UI stays responsive. In React this is Suspense; other frameworks have equivalents.

<Suspense fallback={<Spinner />}>
  <Dashboard />
</Suspense>

Component-Level Splitting

Heavy widgets like rich text editors, maps, or charts can be split too, loading only when the user opens that feature rather than on first paint.

Vendor Splitting

Separating third-party libraries into a vendor chunk lets it cache independently. App code changes frequently; vendor code rarely does, so users re-download less.

Prefetching Chunks

Lazy loading can add a delay when the user navigates. Prefetch the chunk during idle time, for example on link hover, so it is ready before the click.

link.addEventListener('mouseenter', () => import('./pages/Settings'));

Avoiding Over-Splitting

Too many tiny chunks create request overhead and waterfalls. Aim for meaningful boundaries (routes, big features), not splitting every small function.

Tree Shaking Synergy

Code splitting pairs with tree shaking: use ES module imports and import only what you need so dead code never enters any chunk.

import { debounce } from 'lodash-es'; // only debounce is bundled

Measuring the Result

Use a bundle analyzer to inspect chunk sizes and the Coverage tab in DevTools to find unused code shipped on initial load. Lighthouse flags large unused JS.

Strategy Summary

  • Split by route first.
  • Lazy-load heavy components.
  • Separate vendor chunks for caching.
  • Prefetch likely-next chunks during idle.

Quick Check

Which JavaScript feature tells bundlers to create a separate chunk loaded on demand?

Recap

You learned to shrink initial payload with code splitting: dynamic import(), route- and component-level lazy loading, vendor chunking, idle prefetching, and tree shaking. Split at meaningful boundaries and measure with a bundle analyzer.

Często zadawane pytania

Czy lekcja „Dzielenie kodu i leniwe ładowanie” jest bezpłatna?

Tak — pełny tekst „Dzielenie kodu i leniwe ładowanie” 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 Web Performance Optimization & Lighthouse, przejdź na CoddyKit PRO. Kurs Web Performance Optimization & Lighthouse zawiera 4 lekcji w sumie.

Co nauczysz się w „Dzielenie kodu i leniwe ładowanie”?

Dziel duże pakiety JavaScript na fragmenty ładowane na żądanie za pomocą importów dynamicznych i podziału według tras, aby użytkownicy pobierali tylko potrzebny kod. Ćwiczysz Web Performance Optimization & Lighthouse 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ąć Web Performance Optimization & Lighthouse?

Nie wymagamy żadnego doświadczenia. Web Performance Optimization & Lighthouse 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 „Dzielenie kodu i leniwe ładowanie”?

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 Web Performance Optimization & Lighthouse?

Tak. Każda lekcja Web Performance Optimization & Lighthouse 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

  1. Minimalizowanie rozmiaru kodu JavaScript
  2. Wydajne strategie ładowania skryptów
  3. Web Workers i praca poza głównym wątkiem
  4. Dzielenie kodu i leniwe ładowanie
← Powrót do Web Performance Optimization & Lighthouse