Vue Academy · Ders

Tembel Yükleme ve Kod Bölme

Paketleri bölün, bileşenleri ve rotaları tembel olarak yükleyin.

Tembel Yükleme ve Kod Bölme, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 1. 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 3 dersten oluşur.

Paket Boyutu Neden Önemlidir?

Her şey tek ve büyük bir JavaScript dosyasıyla gönderildiğinde kullanıcılar ilk ekranın görünmesi için daha uzun süre bekler. Kod bölme, uygulamanızı yalnızca gerektiğinde yüklenen daha küçük parçalara ayırır; böylece ilk indirme küçülür ve başlangıç hızlanır.

Dinamik import()

Temel araç, dinamik import() işlevidir. Bir dosyanın üst kısmındaki statik içe aktarmanın aksine, bu işlev bir modülü gerektiğinde yükler ve bir vaat döndürür. Paketleyiciler her dinamik içe aktarmayı kendi parçasına böler.

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

Rota Düzeyinde Kod Bölme

En büyük kazanım, her sayfanın kendi kodunu yüklemesi için rotalara göre bölme yapmaktır. Vue Router'da bileşeni doğrudan içe aktarmak yerine dinamik bir içe aktarma döndüren bir işlev aktarın.

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

Statik ve Gecikmeli Rotalar

İki yaklaşımı karşılaştırın. Statik içe aktarma, bileşeni ana parçaya ekler; gecikmeli sürüm ise yalnızca rota ziyaret edildiğinde alınan ayrı bir parça oluşturur.

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

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

defineAsyncComponent

Yönlendiricinin dışında bir bileşeni gecikmeli yüklemek için dinamik içe aktarmayı defineAsyncComponent ile sarmalayın. Vue bunu yalnızca ilk kez oluşturulduğunda yükler.

import { defineAsyncComponent } from "vue"

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

Eşzamansız Bileşenleri Kaydetme

Eşzamansız bir bileşeni diğer bileşenler gibi kaydedin ve şablonunuzda kullanın. Vue, yükleme işlemini sizin için şeffaf biçimde yönetir.

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

Yüklenme ve Hata Durumları

defineAsyncComponent işlevinin gelişmiş biçimi, yüklenirken bir yer tutucu ve başarısız olduğunda bir yedek içerik göstermek için seçenekleri kabul eder.

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

Ağır Bileşenleri Gecikmeli Yükleme

Gecikmeli yükleme için iyi adaylar, ağır veya nadiren kullanılan parçalardır: grafikler, zengin metin düzenleyicileri, haritalar veya yalnızca bazı kullanıcıların açtığı iletişim pencereleri.

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

v-if ile Koşullu Yükleme

Parçasının yalnızca kullanıcı bunu tetiklediğinde alınması için eşzamansız bir bileşeni v-if ile birlikte kullanın.

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

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

Webpack tarzı özel yorumlar, parçalara okunabilir adlar verir ve ağ sekmenizi ve derleme çıktınızı incelemeyi kolaylaştırır.

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

Etkisini Ölçme

Bölme işleminden sonra derleme çıktınızı veya tarayıcının ağ sekmesini kontrol edin. Tek bir büyük paket yerine birden fazla küçük parça dosyası görmeniz ve ilk yüklemede daha az kod indirilmesi gerekir.

Hızlı Kontrol

Gecikmeli yükleme konusundaki bilginizi sınayın.

Özet

Dinamik import() ile kod bölme, ilk paketin boyutunu küçültür. Gecikmeli rotalar için işlev döndüren bir içe aktarma, isteğe bağlı bileşenler için de defineAsyncComponent kullanın; isterseniz yükleme ve hata durumları da ekleyin. Başlangıç yüklemesini hızlı tutmak için büyük veya nadiren kullanılan parçaları gecikmeli yükleyin. Sırada, anımsama ile gereksiz işleri cache kullanarak atlamayı öğreneceksiniz.

Sıkça Sorulan Sorular

“Tembel Yükleme ve Kod Bölme” dersi ücretsiz mi?

Evet — “Tembel Yükleme ve Kod Bölme” 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 3 dersten oluşur.

“Tembel Yükleme ve Kod Bölme” dersinde ne öğreneceğim?

Paketleri bölün, bileşenleri ve rotaları tembel olarak yükleyin. 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, 3 dersinin 1. dersidir.

“Tembel Yükleme ve Kod Bölme” 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 Academy Sayfasına Dön