Vue Academy · Pelajaran

Komponen Asinkron dengan defineAsyncComponent

defineAsyncComponent(), loadingComponent, errorComponent, serta opsi delay dan timeout.

Komponen Asinkron dengan defineAsyncComponent adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Mengapa Menggunakan Komponen Asinkron

defineAsyncComponent memungkinkan Anda memuat komponen secara tertunda — kodenya hanya diambil saat komponen pertama kali dirender.

Ini memungkinkan pemisahan kode pada tingkat rute dan komponen, memperkecil paket awal serta mempercepat tampilan pertama.

Bentuk Fungsi Pemuat

Penggunaan paling sederhana meneruskan fungsi pemuat yang mengembalikan import() dinamis. Vite/webpack secara otomatis memisahkan import tersebut ke dalam potongannya sendiri.

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

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

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

Bentuk Objek Opsi

Untuk kontrol yang lebih terperinci, teruskan objek opsi. Kolom utamanya adalah:

pemuat — fungsi import dinamis
komponen pemuatan — ditampilkan selama pemuatan
komponen kesalahan — ditampilkan jika pemuatan gagal
penundaan / batas waktu — pengaturan waktu

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

Penundaan: Menghindari Tampilan Indikator Pemuatan Sesaat

Opsi delay (bawaan 200 md) menentukan berapa lama Vue menunggu sebelum menampilkan loadingComponent. Jika potongan dimuat lebih cepat daripada penundaan, indikator pemuatan sama sekali tidak muncul.

Atur delay: 0 untuk segera menampilkan keadaan pemuatan.

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

Batas Waktu: Gagal Memuat Terlalu Lambat

Opsi timeout menetapkan waktu maksimum untuk menunggu. Jika pemuat tidak selesai dalam timeout md, errorComponent ditampilkan dan kesalahan dicatat.

Secara bawaan tidak ada batas waktu — pemuatan menunggu tanpa batas.

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

Panggilan Balik onError

Penangan onError dijalankan saat pemuat ditolak. Penangan ini menerima kesalahan, fungsi coba lagi, fungsi gagal, dan jumlah percobaan saat ini.

Di sinilah Anda menerapkan logika mencoba lagi dengan batas untuk jaringan yang tidak stabil.

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

Keputusan Mencoba Lagi atau Gagal

Di dalam onError, Anda harus memanggil tepat salah satu dari retry() atau fail() (atau tidak memanggil keduanya, yang juga menyebabkan kegagalan). Strategi umum: coba lagi kesalahan jaringan beberapa kali, tetapi langsung gagal untuk kesalahan sintaksis atau potongan yang tidak dapat diperbaiki dengan mencoba lagi.

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

Memadukan dengan Suspense

Saat komponen asinkron berada di dalam batas Suspense, batas tersebut justru mengendalikan keadaan pemuatan. Dalam kasus ini, loadingComponent milik komponen diabaikan — cadangan milik Suspense yang digunakan.

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

Memberi Nama Potongan untuk Penelusuran Kesalahan

Anda dapat memberi nama pada potongan yang dibuat menggunakan komentar khusus. Ini membuat permintaan jaringan dan laporan paket lebih mudah dibaca.

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

Komponen Asinkron dan Properti

Komponen asinkron menerima properti dan memancarkan peristiwa persis seperti komponen biasa. Vue meneruskan semuanya secara transparan setelah komponen sebenarnya selesai dimuat — Anda tidak perlu mengubah titik pemanggilan.

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

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

Praktik Terbaik: Gunakan Pemuatan Tertunda di Bagian Atas Layar dengan Hati-Hati

Muat komponen secara tertunda jika komponen tersebut berada di luar layar, berada di balik interaksi (dialog, tab), atau jarang digunakan. Hindari pemuatan tertunda untuk antarmuka penting di bagian atas layar — perjalanan bolak-balik tambahan dapat menurunkan kinerja yang dirasakan.

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

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

Uji Cepat

Uji pemahaman Anda tentang defineAsyncComponent.

Ringkasan

Anda mempelajari pemuatan komponen asinkron dengan defineAsyncComponent:

Bentuk pemuat mengembalikan import() dinamis untuk pemisahan kode
Bentuk opsi menambahkan loadingComponent, errorComponent, delay, timeout
delay menghindari tampilan indikator pemuatan sesaat; timeout menggagalkan pemuatan yang lambat
onError(error, retry, fail, attempts) menerapkan logika mencoba lagi atau gagal
Di dalam Suspense, cadangan milik batas mengambil alih antarmuka pemuatan

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Komponen Asinkron dengan defineAsyncComponent” gratis?

Ya — teks lengkap “Komponen Asinkron dengan defineAsyncComponent” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Komponen Asinkron dengan defineAsyncComponent”?

defineAsyncComponent(), loadingComponent, errorComponent, serta opsi delay dan timeout. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Komponen Asinkron dengan defineAsyncComponent” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Komponen Suspense Vue
Komponen Asinkron dengan defineAsyncComponent
SSR Streaming dengan renderToWebStream
Strategi Hydration Tertunda

← Kembali ke Vue Academy