Frontend Academy · Lekcja

Dzielenie kodu i leniwe trasy

Proszę używać dynamic import() do dzielenia bundla na granicach tras, leniwie ładować komponenty React i Vue oraz monitorować rozmiary fragmentów w wyniku budowania.

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

Dlaczego dzielić kod?

Monolityczny pakiet JavaScript zmusza każdego użytkownika do pobrania każdej linijki kodu aplikacji, nawet funkcji, których nigdy nie użyje. Dzielenie kodu rozbija pakiet na fragmenty ładowane na żądanie.

Dynamic import()

import('./module') zwraca obiekt Promise, który po rozwiązaniu zawiera moduł. Bundlery (Vite, webpack) wykrywają ten zapis i generują osobny fragment ładowany w czasie działania aplikacji.

// Without split — entire heavy lib in main bundle:
import { generateChart } from 'heavy-chart-lib';

// With split — loaded only when needed:
button.addEventListener('click', async () => {
  const { generateChart } = await import('heavy-chart-lib');
  generateChart(data);
});

React.lazy() — dzielenie na poziomie komponentów

React.lazy(() => import('./Heavy')) tworzy komponent, który ładuje swój kod dopiero przy pierwszym renderowaniu. Należy umieścić go w <Suspense>, aby podczas ładowania wyświetlać zawartość zastępczą.

import { lazy, Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Dashboard />
    </Suspense>
  );
}

Dzielenie według tras w React Router

Każda trasa otrzymuje własny fragment kodu — użytkownicy pobierają tylko kod stron, które odwiedzają.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { lazy, Suspense } from 'react';

const Home    = lazy(() => import('./pages/Home'));
const Profile = lazy(() => import('./pages/Profile'));
const Admin   = lazy(() => import('./pages/Admin'));

const router = createBrowserRouter([
  { path: '/',        element: <Suspense fallback={<Spinner/>}><Home /></Suspense> },
  { path: '/profile', element: <Suspense fallback={<Spinner/>}><Profile /></Suspense> },
  { path: '/admin',   element: <Suspense fallback={<Spinner/>}><Admin /></Suspense> }
]);

Asynchroniczne komponenty w Vue 3

Vue udostępnia defineAsyncComponent do realizacji tego samego wzorca.

import { defineAsyncComponent } from 'vue';

const Dashboard = defineAsyncComponent(() =>
  import('./Dashboard.vue')
);

// Use in template like a normal component

Leniwe trasy w Vue Router

Vue Router obsługuje dynamiczne importy w definicjach tras — osobne fragmenty kodu są generowane dla każdej trasy.

const routes = [
  { path: '/',        component: () => import('./pages/Home.vue') },
  { path: '/profile', component: () => import('./pages/Profile.vue') },
  { path: '/admin',   component: () => import('./pages/Admin.vue') }
];

Magiczne komentarze Webpacka

Za pomocą „magicznych komentarzy” Webpacka umieszczanych wewnątrz instrukcji import można określać nazwy fragmentów i sposób ich wstępnego pobierania.

const Profile = lazy(() =>
  import(/* webpackChunkName: "profile", webpackPrefetch: true */ './Profile')
);

// Vite supports a subset; @vite-ignore for special cases

Prefetch a preload

prefetch: pobiera fragment w czasie bezczynności, na potrzeby prawdopodobnej następnej nawigacji. preload: pobiera fragment od razu z wysokim priorytetem, na potrzeby krytycznych fragmentów bieżącej trasy. Należy używać prefetch po najechaniu na odnośnik, a preload w przypadku znanych, nieuchronnie potrzebnych zasobów.

Analizator pakietu

Należy używać rollup-plugin-visualizer (Vite) lub webpack-bundle-analyzer, aby wizualizować rozmiary fragmentów. Należy szukać zbyt dużych fragmentów, zduplikowanych zależności oraz bibliotek, których nie usunięto za pomocą tree-shakingu.

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [visualizer({ open: true, gzipSize: true })]
};

Dzielenie fragmentu bibliotek zewnętrznych

Należy wydzielić biblioteki firm trzecich do osobnego fragmentu vendor, który zmienia się rzadziej niż kod aplikacji — przeglądarki mogą przechowywać go w pamięci podręcznej między wdrożeniami.

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-tooltip']
        }
      }
    }
  }
};

Kiedy NIE dzielić kodu

Małe fragmenty (poniżej 20 KB) przynoszą więcej szkody niż pożytku — narzut HTTP przewyższa oszczędność wynikającą ze zmniejszenia pakietu. Nie należy dzielić każdego komponentu; kod warto dzielić na granicach tras oraz wokół rzeczywiście ciężkich funkcji.

Szybki sprawdzian

Z czym należy połączyć wrapper Reacta lazy(), aby komponent renderował się poprawnie?

Podsumowanie: dzielenie kodu

Dynamic import() generuje osobne fragmenty kodu. React.lazy i Suspense służą do dzielenia na poziomie komponentów. W React Router i Vue Router należy używać leniwych komponentów tras. Prefetch służy do prawdopodobnych następnych fragmentów, a preload do fragmentów krytycznych. Analizator pakietu ujawnia zbędny kod. Biblioteki vendor warto wydzielać, aby można było je przechowywać w pamięci podręcznej. Należy unikać mikrofragmentów poniżej 20 KB.

Często zadawane pytania

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

Tak — pełny tekst „Dzielenie kodu i leniwe trasy” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

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

Proszę używać dynamic import() do dzielenia bundla na granicach tras, leniwie ładować komponenty React i Vue oraz monitorować rozmiary fragmentów w wyniku budowania. Ćwiczysz Frontend 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ąć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend 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 „Dzielenie kodu i leniwe trasy”?

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

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

Core Web Vitals: LCP, FID, CLS
Audytowanie i ocenianie za pomocą Lighthouse
Optymalizacja obrazów: lazy loading i formaty WebP
Dzielenie kodu i leniwe trasy

← Powrót do Frontend Academy