Kaip asinchroniniai komponentai leidžia naudoti likusią naujomą?

Question

Accepted Answer

**Asinchroniniai komponentai** leidžia komponentų kodą įkelti **tik tada, kai jis iš tikrųjų reikalingas**, padalijant jį į atskirą failą (chunk), kuris nusiunčiamas pagal poreikį. Tai sumažina pradinį JavaScript, kurį atsisiunčia naudotojas.

## Asinchroninio komponento apibrėžimas

```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
);
```

Dinaminė `import()` nurodo bundler'iui (Vite/webpack) padalinti `HeavyChart.vue` į atskirą failą, kuris nusikrauna lenivu būdu pirmą kartą panaudojus komponentą — ne kaip pagrindinio bundle'o dalis.

## Kodėl tai svarbu dėl veikimo

```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
```

Dideli, retai naudojami komponentai (rich-text editoriai, grafikai, modaliniai langai, admin panelės) neturi būti pradinėje atsisiuntimoje. Lenivu jų įkėlimu pagerinate pradinį naujimo laiką ir Core Web Vitals.

## Ladiavimo ir klaidų būsenų tvarkymas

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

Ši išplėstinė forma leidžia parodyti sukimąsi atsisiuntimo metu ir atsarginę parinktį nesėkmės atveju — tai svarbu, nes lenivu įkeltimu sudaromos (paprastai trumpos) tinklo delsos.

## Dažnas derinimas: maršruto lygio kodo padalijimas

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

Lenivu maršruto komponentų įkeltimu yra paplitęs ir poveikiausias variantas — kiekvieno puslapio kodas nusikrauna tik tada, kai naudotojas į jį naršo.

## Kodėl tai svarbu

Asinchroniniai komponentai yra Vue'o mechanizmas **kodo padalijimui** — pagrindinė technika mažiems pradinių bundle'ų palaikymui, kai programa auga.

Švarios arba maršruto specifinių komponentų įkeltimu pagal poreikį (su pasirinkta naujimo/klaidų sąsaja) sumažinate JavaScript, kurį naudotojai atsisiunčia iš pradžių, greitindami pirmą naujimą.

Tai standartinis, didelio poveikio veikimo optimizavimas, ypač kai taikomas maršrutams.