Vue کی کارکردگی میں بہتری bundle کے سائز، rendering کی کارکردگی، اور reactivity کی لاگت پر مشتمل ہے۔ یہاں سب سے زیادہ اثر رکھنے والی تکنیکیں ہیں۔
1. Code splitting / lazy loading
js
routes = [{ : , : () }];
= ( ());
Vue کی کارکردگی میں بہتری bundle کے سائز، rendering کی کارکردگی، اور reactivity کی لاگت پر مشتمل ہے۔ یہاں سب سے زیادہ اثر رکھنے والی تکنیکیں ہیں۔
routes = [{ : , : () }];
= ( ());
شروعاتی لوڈ میں سب سے بڑی جیت: صارف کے لیے ابھی ضروری کوڈ شپ نہ کریں۔
<div v-show="tab === 'a'"> <!-- toggled often → cheap CSS flip -->
<div v-if="rarelyShown"> <!-- rarely rendered → skip building it -->
<li v-for="item in items" :key="item.id"> <!-- enables efficient DOM reuse/diffing -->
import { shallowRef, shallowReactive } from "vue";
// for large objects you replace wholesale (or 3rd-party instances), skip deep tracking
const bigData = shallowRef(hugeObject); // only .value reassignment is reactive
Object.freeze(staticConfig); // never-changing data → no reactivity overhead
بہت بڑی objects پر گہری reactivity مہنگی ہے؛ shallowRef/shallowReactive/Object.freeze اس ڈیٹا کو ٹریک کرنے سے بچاتے ہیں جس کی ضرورت نہیں۔
<p>{{ expensiveComputed }}</p> <!-- cached, recomputes only on dependency change -->
<header v-once>{{ siteName }}</header> <!-- render once, never update -->
<div v-memo="[item.id]">...</div> <!-- re-render only if item.id changes -->
Rendering 10,000 rows kills performance → use vue-virtual-scroller / TanStack Virtual
to render only the visible rows.
Vue DevTools (component render timings, why a component re-rendered)
build output / rollup-plugin-visualizer → bundle composition
Lighthouse → Core Web Vitals
Vue ڈیفالٹ طور پر تیز ہے، لیکن بڑی ایپلیکیشنز کو شعوری بہتری کی ضرورت ہے: lazy-load کریں bundles کو سمیٹنے کے لیے، v-if/v-show کو صحیح طریقے سے منتخب کریں، مستحکم keys استعمال کریں، بڑے ڈیٹا پر over-reactivity سے بچیں (shallowRef/freeze)، computed/v-memo کے ساتھ cache کریں، اور لمبی فہرستوں کو virtualize کریں۔
یہ جاننا کہ کون سی تکنیک کون سی رکاوٹ کو حل کرتی ہے — اور DevTools/Lighthouse کے ساتھ پیمائش کرنا بجائے اندازے کے — یہی ہے جو ایک بڑتی ہوئی Vue ایپ کو responsive رکھتا ہے۔