Vue Academy · Lekcja

Komponenty asynchroniczne z defineAsyncComponent

defineAsyncComponent(), loadingComponent, errorComponent oraz opcje delay i timeout.

Komponenty asynchroniczne z defineAsyncComponent to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 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 Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Dlaczego warto używać komponentów asynchronicznych

defineAsyncComponent umożliwia leniwe ładowanie komponentu — jego kod jest pobierany dopiero przy pierwszym renderowaniu komponentu.

Umożliwia to dzielenie kodu na poziomie tras i komponentów, zmniejszając początkowy bundle i przyspieszając pierwsze renderowanie.

Postać z funkcją loadera

Najprostsze użycie polega na przekazaniu funkcji loadera, która zwraca dynamiczne import(). Vite/webpack automatycznie dzieli ten import na osobny chunk.

<script setup>
import { defineAsyncComponent } from 'vue'

const SettingsModal = defineAsyncComponent(() =>
  import('./SettingsModal.vue')
)
</script>

<template>
  <SettingsModal v-if="showSettings" />
</template>

Postać z obiektem opcji

Aby uzyskać większą kontrolę, należy przekazać obiekt opcji. Najważniejsze pola to:

loader — funkcja dynamicznego importu
loadingComponent — wyświetlany podczas ładowania
errorComponent — wyświetlany w przypadku nieudanego ładowania
delay / timeout — ustawienia czasowe

import { defineAsyncComponent } from 'vue'
import Loading from './Loading.vue'
import ErrorView from './ErrorView.vue'

const AsyncChart = defineAsyncComponent({
  loader: () => import('./Chart.vue'),
  loadingComponent: Loading,
  errorComponent: ErrorView,
  delay: 200,
  timeout: 5000
})

delay: unikanie mignięcia spinnera

Opcja delay (domyślnie 200 ms) określa, jak długo Vue czeka przed wyświetleniem loadingComponent. Jeśli chunk zostanie załadowany szybciej, spinner w ogóle się nie pojawi.

Ustawienie delay: 0 powoduje natychmiastowe wyświetlenie stanu ładowania.

const AsyncPanel = defineAsyncComponent({
  loader: () => import('./Panel.vue'),
  loadingComponent: Spinner,
  // wait 300ms before showing Spinner
  delay: 300
})

timeout: kończenie zbyt wolnego ładowania

Opcja timeout określa maksymalny czas oczekiwania. Jeśli loader nie zakończy się w ciągu timeout ms, zostanie wyświetlony errorComponent, a błąd zostanie zapisany w logach.

Domyślnie nie ma limitu czasu — ładowanie trwa bezterminowo.

const AsyncReport = defineAsyncComponent({
  loader: () => import('./Report.vue'),
  errorComponent: ErrorView,
  // fail if not loaded within 10s
  timeout: 10000
})

Callback onError

Handler onError jest uruchamiany, gdy loader zostanie odrzucony. Otrzymuje error, funkcję retry, funkcję fail oraz bieżącą liczbę attempt.

W tym miejscu implementuje się logikę ponawiania z limitem dla zawodnych sieci.

const AsyncWidget = defineAsyncComponent({
  loader: () => import('./Widget.vue'),
  onError(error, retry, fail, attempts) {
    if (attempts <= 3) {
      retry()   // try loading again
    } else {
      fail()    // give up, show errorComponent
    }
  }
})

Decyzja Retry czy Fail

Wewnątrz onError należy wywołać dokładnie jedno z retry() lub fail() (albo żadnego z nich — to również kończy się niepowodzeniem). Typowa strategia polega na kilkukrotnym ponawianiu prób w przypadku błędów sieci, ale natychmiastowym zakończeniu działania w przypadku błędu składni lub chunka, którego ponawianie nie naprawi.

onError(error, retry, fail, attempts) {
  const isNetwork = /Loading chunk/.test(error.message)
  if (isNetwork && attempts <= 2) {
    retry()
  } else {
    fail()
  }
}

Łączenie z Suspense

Gdy komponent asynchroniczny znajduje się wewnątrz granicy Suspense, to granica steruje stanem ładowania. W takim przypadku własny komponent loadingComponent komponentu jest ignorowany — pierwszeństwo ma fallback Suspense.

<template>
  <Suspense>
    <AsyncChart />  <!-- loadingComponent ignored here -->
    <template #fallback>Loading chart...</template>
  </Suspense>
</template>

Nazwane chunki ułatwiające debugowanie

Można nadać wygenerowanemu chunkowi nazwę za pomocą magicznego komentarza. Ułatwia to odczytywanie żądań sieciowych i raportów dotyczących bundle.

const AsyncEditor = defineAsyncComponent(() =>
  import(
    /* webpackChunkName: "editor" */
    './RichTextEditor.vue'
  )
)

Komponenty asynchroniczne i propsy

Komponenty asynchroniczne przyjmują propsy i emitują zdarzenia dokładnie tak samo jak zwykłe komponenty. Po rozwiązaniu rzeczywistego komponentu Vue przekazuje wszystko w sposób transparentny — nie trzeba zmieniać miejsca jego użycia.

<template>
  <AsyncProfile
    :user-id="id"
    @save="handleSave"
  />
</template>

<!-- AsyncProfile resolves to the real component, props/events pass through -->

Dobra praktyka: ostrożnie z leniwym ładowaniem above the fold

Warto leniwie ładować komponenty znajdujące się poza ekranem, ukryte za interakcjami (modale, karty) lub rzadko używane. Należy unikać leniwego ładowania kluczowego interfejsu above the fold — dodatkowa podróż w obie strony może pogorszyć postrzeganą wydajność.

// Good candidate: modal only opened on click
const Modal = defineAsyncComponent(() => import('./Modal.vue'))

// Poor candidate: hero shown immediately on load
// import Hero directly instead

Szybki test

Sprawdź swoją wiedzę na temat defineAsyncComponent.

Podsumowanie

Dowiedział się Pan, jak ładować komponenty asynchroniczne za pomocą defineAsyncComponent:

postać z loaderem zwraca dynamiczne import() na potrzeby dzielenia kodu
postać z obiektem opcji dodaje loadingComponent, errorComponent, delay i timeout
delay zapobiega mignięciu spinnera, a timeout kończy zbyt wolne ładowanie
onError(error, retry, fail, attempts) implementuje logikę ponawiania lub kończenia działania
wewnątrz Suspense fallback granicy przejmuje obsługę interfejsu ładowania

Często zadawane pytania

Czy lekcja „Komponenty asynchroniczne z defineAsyncComponent” jest bezpłatna?

Tak — pełny tekst „Komponenty asynchroniczne z defineAsyncComponent” 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 4 lekcji w sumie.

Co nauczysz się w „Komponenty asynchroniczne z defineAsyncComponent”?

defineAsyncComponent(), loadingComponent, errorComponent oraz opcje delay i timeout. Ć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 2 z 4.

Ile czasu zajmuje lekcja „Komponenty asynchroniczne z defineAsyncComponent”?

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

Komponent Vue Suspense
Komponenty asynchroniczne z defineAsyncComponent
Strumieniowanie SSR z renderToWebStream
Strategie odroczonej hydratacji

← Powrót do Vue Academy