Vue Academy · Pelajaran

Pemuatan Lambat dan Pemisahan Kode

Pisahkan bundel dan muat komponen serta rute secara lambat.

Pemuatan Lambat dan Pemisahan Kode adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. 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 3 pelajaran total.

Mengapa Ukuran Bundel Penting

Ketika semuanya dikirim dalam satu file JavaScript besar, pengguna harus menunggu lebih lama hingga layar pertama muncul. Pemisahan kode memecah aplikasi menjadi potongan-potongan kecil yang hanya dimuat saat diperlukan, sehingga unduhan awal lebih kecil dan aplikasi mulai lebih cepat.

import() Dinamis

Alat utamanya adalah fungsi import() dinamis. Berbeda dari impor statis di bagian atas file, fungsi ini memuat modul sesuai permintaan dan mengembalikan janji. Pengemas membagi setiap impor dinamis menjadi potongan tersendiri.

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

Pemisahan Kode Berdasarkan Rute

Manfaat terbesar diperoleh dengan membagi kode berdasarkan rute, sehingga setiap halaman memuat kodenya sendiri. Dalam Vue Router, berikan fungsi yang mengembalikan impor dinamis, bukan mengimpor komponen secara langsung.

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

Rute Statis vs Rute Malas

Bandingkan kedua gaya tersebut. Impor statis menggabungkan komponen ke dalam potongan utama; versi malas membuat potongan terpisah yang hanya diambil saat rute dikunjungi.

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

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

defineAsyncComponent

Untuk memuat komponen secara malas di luar router, bungkus impor dinamis dengan defineAsyncComponent. Vue hanya memuatnya saat komponen pertama kali dirender.

import { defineAsyncComponent } from "vue"

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

Mendaftarkan Komponen Asinkron

Daftarkan komponen asinkron seperti komponen lainnya, lalu gunakan dalam templat. Vue menangani proses pemuatan secara transparan.

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

Status Pemuatan dan Kesalahan

Bentuk lanjutan defineAsyncComponent menerima opsi untuk menampilkan pengganti sementara saat memuat dan cadangan jika prosesnya gagal.

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

Memuat Komponen Berat Secara Malas

Bagian yang cocok untuk dimuat secara malas adalah komponen yang berat atau jarang digunakan: grafik, penyunting teks kaya, peta, atau dialog modal yang hanya dibuka oleh sebagian pengguna.

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

Pemuatan Bersyarat dengan v-if

Padukan komponen asinkron dengan v-if agar potongannya hanya diambil ketika pengguna memicunya.

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

Potongan Bernama untuk Penelusuran Kesalahan

Komentar khusus bergaya Webpack memberikan nama yang mudah dibaca pada potongan, sehingga tab jaringan dan keluaran build lebih mudah diperiksa.

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

Mengukur Dampak

Setelah pemisahan kode, periksa hasil bundel atau tab jaringan browser. Anda akan melihat beberapa berkas potongan yang lebih kecil, bukan satu bundel besar, dan pemuatan awal akan mengunduh lebih sedikit kode.

Pemeriksaan Singkat

Uji pemahaman Anda tentang pemuatan lambat.

Ringkasan

Pemisahan kode dengan import() dinamis mengurangi bundel awal. Gunakan fungsi yang mengembalikan impor untuk rute yang dimuat secara lambat dan defineAsyncComponent untuk komponen sesuai permintaan, dengan keadaan pemuatan dan galat jika diperlukan. Muat secara lambat bagian yang berat atau jarang digunakan agar proses awal tetap cepat. Selanjutnya, Anda akan menyimpan hasil dalam cache dan melewati pekerjaan yang tidak diperlukan dengan memoisasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pemuatan Lambat dan Pemisahan Kode” gratis?

Ya — teks lengkap “Pemuatan Lambat dan Pemisahan Kode” 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 3 pelajaran total.

Apa yang akan aku pelajari di “Pemuatan Lambat dan Pemisahan Kode”?

Pisahkan bundel dan muat komponen serta rute secara lambat. 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 1 dari 3.

Berapa lama pelajaran “Pemuatan Lambat dan Pemisahan Kode” 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

Pemuatan Lambat dan Pemisahan Kode
Teknik Memoisasi
Mengidentifikasi dan Memperbaiki Hambatan

← Kembali ke Vue Academy