Vue Academy · Ders

defineAsyncComponent ile Asenkron Bileşenler

defineAsyncComponent(), loadingComponent, errorComponent, delay ve timeout seçenekleri.

defineAsyncComponent ile Asenkron Bileşenler, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Eşzamansız Bileşenler Neden Kullanılır

defineAsyncComponent, bir bileşeni gecikmeli yüklemenizi sağlar — bileşenin kodu yalnızca ilk kez oluşturulduğunda alınır.

Bu, rota ve bileşen düzeyinde kod bölmeyi mümkün kılar; ilk paketinizi küçültür ve ilk görüntülemeyi hızlandırır.

Yükleyici İşlevi Biçimi

En basit kullanım, dinamik bir import() döndüren bir yükleyici işlevi geçirir. Vite/webpack bu içe aktarmayı otomatik olarak ayrı bir parçaya böler.

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

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

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

Seçenekler Nesnesi Biçimi

Daha ayrıntılı denetim için bir seçenekler nesnesi geçirin. Ana alanlar şunlardır:

yükleyici — dinamik içe aktarma işlevi
loadingComponent — yükleme sırasında gösterilir
errorComponent — yükleme başarısız olursa gösterilir
gecikme / timeout — zamanlama denetimleri

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
})

Gecikme: Yükleme Göstergesinin Kısa Süreli Görünmesini Önleme

delay seçeneği (varsayılan olarak 200ms), Vue'nun loadingComponent'ı göstermeden önce ne kadar bekleyeceğini belirler. Parça gecikmeden daha hızlı yüklenirse hiçbir yükleme göstergesi görünmez.

Yükleme durumunu hemen göstermek için delay: 0 ayarlayın.

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

timeout: Yavaş Yüklemelerde Başarısız Olma

timeout seçeneği, beklenecek en uzun süreyi belirler. Yükleyici timeout ms içinde çözülmezse errorComponent gösterilir ve bir hata kayda geçirilir.

Varsayılan olarak zaman aşımı yoktur — yükleme süresiz olarak bekler.

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

onError Geri Çağırması

onError işleyicisi, yükleyici reddedildiğinde çalışır. Bu işleyiciye hata, bir yeniden deneme işlevi, bir başarısız kılma işlevi ve geçerli deneme sayısı iletilir.

Kararsız ağlar için sınırlı yeniden deneme mantığını burada uygulayabilirsiniz.

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
    }
  }
})

Yeniden Deneme mi, Başarısız Olma mı?

onError içinde retry() veya fail() işlevlerinden tam olarak birini çağırmalısınız (ya da hiçbirini çağırmayabilirsiniz; bu da başarısızlıkla sonuçlanır). Yaygın bir strateji, ağ hatalarında birkaç kez yeniden denemek; ancak yeniden denemenin düzeltemeyeceği bir söz dizimi veya parça hatasında hemen başarısız olmaktır.

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

Suspense ile Birlikte Kullanma

Eşzamansız bir bileşen Suspense sınırı içinde bulunduğunda, yükleme durumunu bunun yerine sınır yönetir. Bu durumda bileşenin kendi loadingComponent'ı yok sayılır — Suspense'in yedek içeriği kullanılır.

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

Hata Ayıklama için Adlandırılmış Parçalar

Oluşturulan parçayı özel bir yorumla adlandırabilirsiniz. Bu, ağ isteklerinin ve paket raporlarının okunmasını kolaylaştırır.

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

Eşzamansız Bileşenler ve Özellikler

Eşzamansız bileşenler, normal bileşenler gibi özellikleri kabul eder ve olaylar yayınlar. Gerçek bileşen çözüldüğünde Vue her şeyi saydam biçimde aktarır — çağrı noktasını değiştirmeniz gerekmez.

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

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

Görünür Alan İçeriğini Dikkatle Geç Yükleme

Ekran dışında kalan, etkileşimlerin arkasında bulunan (iletişim pencereleri, sekmeler) veya nadiren kullanılan bileşenleri geç yükleyin. Kritik ilk ekran arayüzünü geç yüklemekten kaçının — ek gidiş-dönüş, algılanan performansı olumsuz etkileyebilir.

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

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

Hızlı Kontrol

defineAsyncComponent konusundaki anlayışınızı sınayın.

Özet

defineAsyncComponent ile eşzamansız bileşen yüklemeyi öğrendiniz:

Yükleyici biçimi, kod bölme için dinamik bir import() döndürür
Seçenekler biçimi loadingComponent, errorComponent, delay ve timeout ekler
delay, yükleme göstergesinin kısa süreli görünmesini önler; timeout, yavaş yüklemeleri başarısız kılar
onError(error, retry, fail, attempts), yeniden deneme veya başarısız olma mantığını uygular
Suspense içinde sınırın yedek içeriği, yükleme arayüzünün denetimini devralır

Sıkça Sorulan Sorular

“defineAsyncComponent ile Asenkron Bileşenler” dersi ücretsiz mi?

Evet — “defineAsyncComponent ile Asenkron Bileşenler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“defineAsyncComponent ile Asenkron Bileşenler” dersinde ne öğreneceğim?

defineAsyncComponent(), loadingComponent, errorComponent, delay ve timeout seçenekleri. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“defineAsyncComponent ile Asenkron Bileşenler” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Vue Suspense Bileşeni
defineAsyncComponent ile Asenkron Bileşenler
renderToWebStream ile Akış SSR'si
Ertelenmiş Hydration Stratejileri

← Vue Academy Sayfasına Dön