Async komponentler nasıl tembel yüklemeyi etkinleştirir?

Question

Accepted Answer

**Async komponentler**, bir bileşenin kodunu **gerçekten ihtiyaç duyulduğunda yükleyerek**, bunu isteğe bağlı olarak alınan ayrı bir pakete (chunk) bölerek hızlı yüklemeyi sağlar. Bu, kullanıcının indirdiği ilk JavaScript miktarını azaltır.

## Async bileşen tanımlama

```js
import { defineAsyncComponent } from "vue";

// the component's code is only downloaded when it first renders
const HeavyChart = defineAsyncComponent(() =>
  import("./HeavyChart.vue")   // dynamic import → separate chunk
);
```

Dinamik `import()`, bundler'a (Vite/webpack) `HeavyChart.vue`'yi kendi dosyasına bölmesini ve bileşen ilk kez kullanıldığında tembel yüklemesini söyler — ana paketin parçası olarak değil.

## Neden bu performans için önemlidir

```text
Without lazy loading: main.js = app + HeavyChart + Editor + Modal + ... (huge, slow first load)
With lazy loading:    main.js = app only; HeavyChart.js loads when you open the chart
```

Büyük, nadiren kullanılan bileşenler (zengin metin editörleri, grafikler, modallar, yönetici panelleri) ilk indirmede bulunmak zorunda değildir. Bunları tembel yüklemek, ilk yükleme zamanını ve Core Web Vitals'ı iyileştirir.

## Yükleme ve hata durumlarını işleme

```js
const HeavyChart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: LoadingSpinner,  // shown while the chunk downloads
  errorComponent: ErrorDisplay,       // shown if the download fails
  delay: 200,                         // wait 200ms before showing the spinner
  timeout: 5000,                      // give up after 5s
});
```

Bu gelişmiş form, yükleme sırasında bir spinner göstermenizi ve hata durumunda bir geri dönüş göstermenizi sağlar — tembellikte yükleme (genellikle kısa) bir ağ gecikmesi tanıttığından önemlidir.

## Yaygın eşleştirme: rota seviyesi kod bölümü

```js
// Vue Router — each route loads its page component on demand
const routes = [
  { path: "/dashboard", component: () => import("./Dashboard.vue") },
];
```

Rota bileşenlerini tembel yüklemek, en yaygın ve etkili kullanım örneğidir — her sayfanın kodu yalnızca kullanıcı ona gittiğinde yüklenir.

## Neden önemli

Async komponentler, Vue'nun **kod bölümleme** mekanizmasıdır — bir uygulama büyüdükçe ilk paketleri küçük tutmanın anahtar tekniği.

ağır veya rota'ya özgü bileşenleri isteğe bağlı olarak tembel yükleyerek (isteğe bağlı yükleme/hata UI'si ile), kullanıcıların baştan indirdiği JavaScript'i azaltır, ilk yükü hızlandırırsınız.

Bu standart, yüksek etkili bir performans optimizasyonudur; özellikle rotalar için uygulandığında etkilidir.