Vue Academy · Lekcja

Leniwe ładowanie i dzielenie kodu

Podział bundli oraz leniwe ładowanie komponentów i tras.

Leniwe ładowanie i dzielenie kodu to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 3. 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 Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.

Dlaczego rozmiar bundla ma znaczenie

Gdy wszystko jest dostarczane w jednym dużym pliku JavaScript, użytkownicy dłużej czekają na wyświetlenie pierwszego ekranu. Dzielenie kodu rozbija aplikację na mniejsze chunki ładowane tylko wtedy, gdy są potrzebne, zmniejszając początkowy rozmiar pobieranych danych i przyspieszając uruchamianie.

Dynamiczne import()

Najważniejszym narzędziem jest dynamiczna funkcja import(). W przeciwieństwie do statycznego importu na początku pliku ładuje ona moduł na żądanie i zwraca obietnicę. Bundlery dzielą każdy dynamiczny import na osobny chunk.

const module = await import("./heavyModule.js")
module.doSomething()

Dzielenie kodu na poziomie tras

Największą korzyść daje dzielenie kodu według tras, dzięki czemu każda strona ładuje własny kod. W Vue Router przekaż funkcję zwracającą dynamiczny import zamiast importować komponent bezpośrednio.

const routes = [
  {
    path: "/dashboard",
    component: () => import("./views/Dashboard.vue")
  }
]

Trasy statyczne a leniwe

Porównaj oba style. Import statyczny dołącza komponent do głównego chunka, a wersja leniwa tworzy osobny chunk pobierany dopiero po odwiedzeniu danej trasy.

// eager (always loaded)
import Dashboard from "./views/Dashboard.vue"

// lazy (loaded on demand)
const Dashboard = () => import("./views/Dashboard.vue")

defineAsyncComponent

Aby leniwie ładować komponent poza routerem, opakuj dynamiczny import w defineAsyncComponent. Vue załaduje go dopiero przy pierwszym renderowaniu.

import { defineAsyncComponent } from "vue"

const Chart = defineAsyncComponent(() =>
  import("./components/HeavyChart.vue")
)

Rejestrowanie komponentów asynchronicznych

Zarejestruj komponent asynchroniczny tak jak każdy inny i użyj go w szablonie. Vue zajmie się ładowaniem w sposób przejrzysty dla aplikacji.

export default {
  components: {
    HeavyChart: defineAsyncComponent(() =>
      import("./components/HeavyChart.vue")
    )
  }
}

Stany ładowania i błędu

Rozszerzona forma defineAsyncComponent przyjmuje opcje pozwalające wyświetlić element zastępczy podczas ładowania oraz element awaryjny w razie niepowodzenia.

const Chart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: Spinner,
  errorComponent: LoadError,
  delay: 200,
  timeout: 5000
})

Leniwe ładowanie ciężkich komponentów

Dobrymi kandydatami do leniwego ładowania są ciężkie lub rzadko używane elementy: wykresy, edytory tekstu sformatowanego, mapy albo okna modalne otwierane tylko przez niektórych użytkowników.

const RichEditor = defineAsyncComponent(() =>
  import("./components/RichTextEditor.vue")
)
// only downloaded when the editor is actually shown

Warunkowe ładowanie za pomocą v-if

Połącz komponent asynchroniczny z v-if, aby jego chunk był pobierany dopiero wtedy, gdy użytkownik go wywoła.

<template>
  <button @click="showEditor = true">Edit</button>
  <RichEditor v-if="showEditor" />
</template>

Nazwane chunki na potrzeby debugowania

Magiczne komentarze w stylu Webpacka nadają chunkom czytelne nazwy, dzięki czemu łatwiej analizować kartę sieciową i wynik budowania aplikacji.

const Reports = () => import(
  /* webpackChunkName: "reports" */ "./views/Reports.vue"
)

Mierzenie wpływu

Po podziale należy sprawdzić wynik kompilacji lub kartę sieci w przeglądarce. Powinno być widać wiele mniejszych plików z fragmentami kodu zamiast jednego dużego pakietu, a przy pierwszym ładowaniu powinno zostać pobrane mniej kodu.

Szybki sprawdzian

Proszę sprawdzić swoją wiedzę na temat leniwego ładowania.

Podsumowanie

Podział kodu z użyciem dynamicznego import() zmniejsza początkowy pakiet. W przypadku leniwie ładowanych tras należy używać funkcji zwracającej import, a dla komponentów ładowanych na żądanie — defineAsyncComponent, opcjonalnie ze stanami ładowania i błędu. Ciężkie lub rzadko używane fragmenty należy ładować leniwie, aby zachować szybkość uruchamiania. W następnej części poznają Państwo buforowanie i pomijanie zbędnej pracy za pomocą memoizacji.

Często zadawane pytania

Czy lekcja „Leniwe ładowanie i dzielenie kodu” jest bezpłatna?

Tak — pełny tekst „Leniwe ładowanie i dzielenie kodu” 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 Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Leniwe ładowanie i dzielenie kodu”?

Podział bundli oraz leniwe ładowanie komponentów i tras. Ćwiczysz Vue 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ąć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue 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 3.

Ile czasu zajmuje lekcja „Leniwe ładowanie i dzielenie kodu”?

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

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

Leniwe ładowanie i dzielenie kodu
Techniki memoizacji
Identyfikowanie i usuwanie wąskich gardeł

← Powrót do Vue Academy