అసింక్రోనస్ సంబంధకాలు ఎలా నిదానమైన లోడింగ్‌ను సక్షమం చేస్తాయి?

Question

Accepted Answer

**అసింక్రోనస్ సంబంధకాలు** మీరు ఒక సంబంధకం యొక్క కోడ్‌ని **అది నిజానికి అవసరమైనప్పుడు మాత్రమే లోడ్** చేయడానికి అనుమతిస్తాయి, దానిని ఆన్-డిమాండ్‌లో సేకరించిన విడిగా ఉన్న కట్టుకు (చంక్‌) విభజిస్తాయి. ఇది ఉపయోగకారుడు డౌన్‌లోడ్ చేసే ప్రారంభ జావాస్క్రిప్ట్‌ను తగ్గిస్తుంది.

## అసింక్రోనస్ సంబంధకం నిర్ణయించడం

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

డైనమిక్ `import()` బండ్లర్‌కు (Vite/webpack) `HeavyChart.vue`ని దాని స్వంత ఫైల్‌లో విభజించమని చెప్పుతుంది, సంబంధకం మొదటిసారిగా ఉపయోగించబడినప్పుడు నిదానమైన లోడింగ్‌ - ప్రధాన కట్టు యొక్క భాగం కాదు.

## ఇది పనితీరు కోసం ఎందుకు ముఖ్యమైనది

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

బड్డ, చాలా అరుదుగా ఉపయోగించే సంబంధకాలు (సమృద్ధ-టెక్స్ట్ సంపాదకులు, చార్ట్‌లు, మోడల్‌లు, నిర్వాహక ప్যానెల్‌లు) ప్రారంభ డౌన్‌లోడ్‌లో ఉండవలసిన అవసరం లేదు. వాటిని నిదానమైన-లోడింగ్ చేయడం ప్రారంభ లోడ్ సమయం మరియు కోర్ వెబ్ విటల్‌లను మెరుగుపరుస్తుంది.

## లోడింగ్ మరియు లోపం స్థితులను నిర్వహించడం

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

ఈ ఆధునిక రూపం మీరు ఫెచ్ సమయంలో స్పిన్నర్‌ని చూపించటానికి మరియు విఫలమైనప్పుడు ఫాల్‌బ్యాక్‌ని చూపించటానికి అనుమతిస్తుంది — నిదానమైన లోడింగ్ (సాధారణంగా సంక్షిప్త) నెట్‌వర్క్ ఆలస్యాన్ని ప్రవేశపెట్టుతుంది కాబట్టి ముఖ్యమైనది.

## సాధారణ జత: మార్గ-స్థాయి కోడ్ విభజన

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

మార్గ సంబంధకాలను నిదానమైన-లోడింగ్ చేయడం చాలా సాధారణ మరియు ప్రభావవంతమైన ఉపయోగం - ఉపయోగకారుడు దానికి నావిగేట్ చేసినప్పుడు ప్రతి పేజీ యొక్క కోడ్ మాత్రమే లోడ్ అవుతుంది.

## ఇది ఎందుకు ముఖ్యమైనది

అసింక్రోనస్ సంబంధకాలు Vue యొక్క **కోడ్ విభజన** కోసం పద్ధతి - అనువర్తనం పెరిగేకొద్దీ ప్రారంభ కట్టులను చిన్నగా ఉంచడానికి ముఖ్యమైన సాంకేతికత.

భారీ లేదా మార్గ-నిర్దిష్ట సంబంధకాలను ఆన్-డిమాండ్‌ల వద్ద నిదానమైన-లోడింగ్ చేయడం ద్వారా (ఐచ్ఛిక లోడింగ్/లోపం UI తో), మీరు ఉపయోగకారులు ప్రారంభానికి డౌన్‌లోడ్ చేసే జావాస్క్రిప్ట్‌ను తగ్గించండి, మొదటి లోడ్‌ను వేగవంతం చేస్తుంది.

ఇది ప్రమాణం, ఎక్కువ-ప్రభావ పనితీరు ఆప్టిమైజేషన్, సిద్ధాంతపరంగా మార్గాలకు వర్తించినప్పుడు.