async કમ્પોનેન્ટ્સ આલસપૂર્ણ લોડિંગ કેવી રીતે સક્ષમ કરે છે?

Question

Accepted Answer

**Async કમ્પોનેન્ટ્સ** તમને કમ્પોનેન્ટના કોડને **માત્ર જ્યારે તે ખરેખર જરૂરી હોય ત્યારે** લોડ કરવા દે છે, તેને અલગ બંડલમાં વિભાજીત કરે છે (chunk) જે માંગ પર લાવવામાં આવે છે. આ ব્યુઝર ડાઉનલોડ કરે તે પ્રારંભિક JavaScript કમ કરે છે.

## શા માટે તે મહત્વપૂર્ણ છે

Async કમ્પોનેન્ટ વ્યાખ્યાયિત કરવો

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

મોટા, ભાગ્યે જ વપરાતા કમ્પોનેન્ટ્સ (સમૃદ્ધ-ટેક્સ્ટ એડિટર, ચાર્ટ્સ, મોડલ્સ, વ્યવહારક પેનલ્સ) પ્રારંભિક ડાઉનલોડમાં હોવાની જરૂર નથી. તેમને આલસપૂર્ણ-લોડિંગ પ્રારંભિક લોડ સમય અને Core Web Vitals સુધારે છે।

લોડિંગ અને ભૂલ સ્થિતિ હેન્ડલ કરવી

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

માર્ગ કમ્પોનેન્ટ્સ આલસપૂર્ણ-લોડિંગ સૌથી સામાન્ય અને પ્રભાવશાળી ઉપયોગ છે — દરેક પૃષ્ઠતાનો કોડ માત્ર જ્યારે વપરાશકર્તા તેમાં નેવીગેટ કરે તો જ લોડ થાય છે।

શા માટે તે મહત્વપૂર્ણ છે

Async કમ્પોનેન્ટ્સ Vue ની **કોડ વિભાજન** પ્રણાલી છે — એપ્લિકેશન વધતો સમયે પ્રારંભિક બંડલ્સ નાનું રાખવાની મુખ્ય તકનીક।

ભારે અથવા માર્ગ-ચોક્કસ કમ્પોનેન્ટ્સને માંગ પર લોડ કરીને (વૈકલ્પિક લોડિંગ/ભૂલ UI સાથે), તમે શરૂઆતમાં વપરાશકર્તાઓ ડાઉનલોડ કરે તે JavaScript કાપો, પ્રથમ લોડ ગતિ વધારીને।

તે એક માનક, ઉચ્ચ-પ્રભાવ કામગીરી ઑપ્ટિમાઇઝેશન છે, ખાસ કરીને જ્યારે માર્ગોને લાગુ કરવામાં આવે.