ஒற்றுமையற்ற (async) கூறுகள் எவ்வாறு விருப்பப்படி ஏற்றுவதை செயல்படுத்துகிறது?

Question

Accepted Answer

**ஒற்றுமையற்ற கூறுகள்** (async components) உங்களை ஒரு கூறுவின் சிறுவளவை **உண்மையில் தேவைப்படும் போது மட்டுமே ஏற்ற** அனுமதிக்கின்றன, இது தேவையற்ற பிணைய (chunk) அனுப்பப்படும் என பிரிக்கிறது. இது ব்যবহারকারி பதிவுசெய்யும் ஆரம்ப JavaScript குறைக்கிறது.

## ஒற்றுமையற்ற கூறு வரையறுத்தல்

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

வழி-கூறுகளை விருப்பப்படி ஏற்றுவது மிகவும் பொதுவான மற்றும் மக்களுக்கு விளைவு ஆக — ஒவ்வொரு உரையின் சிறுவளவு பயனர் அதற்கு செல்லும் போது மட்டுமே ஏற்றப்பட்டு.

## இது ஏன் முக்கியமான

ஒற்றுமையற்ற கூறுகள் Vue இன் **சிறுவளவு பிரிப்பு** பொறிமுறை — ஒரு பயன்பாடு வளரும் போது ஆரம்ப பிணையை சிறியதாக வைக்க வேண்டிய முக்கிய நுட்பம்.

பெரிய அல்லது வழி-கட்டுப்பாட்டு கூறுகளை தேவையற்று விருப்பப்படி ஏற்றுவதின் மூலம் (விரயி ஏற்றுவது/பிழை UI உடன்), நீங்கள் பயனர்கள் முதலாவதாக பதிவுசெய்யும் JavaScript குறைக்கிறீர்கள், முதல் ஏற்றலை விரையாக்குகிறீர்கள்.

இது ஒரு நிலையான, உচ்ச விளைவு செயல்திறன் மேம்பாடு, சிறப்பாக வழிகளுக்கு கொள்ளப்படும் போது.