Vue ਕਾਰਗਿਲਤਾ ਅਨੁਕੂਲਨ bundle ਆਕਾਰ, ਪ੍ਰਸਤੁਤੀ ਕੁਸ਼ਲਤਾ, ਅਤੇ reactivty ਲਾਗਤ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। ਇੱਥੇ ਸਭ ਤੋਂ ਵਧੁ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਕਨੀਕਾਂ ਹਨ।
// lazy-load routes and heavy components → smaller initial bundle
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
ਵਡੀਆਂ ਵਸਤੂਆਂ ਤੇ ਡੂੰਘੀ reactivty ਮਹਿੰਗੀ ਹੈ; 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 ਨੂੰ ਸਹੀ ਤਰ੍ਹਾਂ ਚੁਣੋ, ਸਥਿਰ ਕੁੰਜੀਆਂ ਵਰਤੋ, ਵਡੇ ਡੇਟਾ ਤੇ ਓਵਰ-reactivty ਤੋਂ ਬਚੋ (shallowRef/freeze), computed/v-memo ਨਾਲ cache ਕਰੋ, ਅਤੇ ਲੰਬੀਆਂ ਸੂਚੀਆਂ ਨੂੰ ਵਰਚੁਅਲ ਕਰੋ।
ਜਾਣਨਾ ਕਿ ਕਿਹੜੀ ਤਕਨੀਕ ਕਿਸ ਬੋਤਲ ਦੀ ਗਰਦਨ ਦਾ ਸਮਾਧਾਨ ਕਰਦੀ ਹੈ — ਅਤੇ DevTools/Lighthouse ਦੇ ਨਾਲ ਮਾਪ ਕਰੋ ਬਜਾਏ ਅੰਦਾਜ਼ੇ ਦੇ — ਇਹ ਹੀ ਹੈ ਜੋ ਇੱਕ ਵਧ ਰਹੇ Vue ਐਪ ਨੂੰ ਜਵਾਬੀ ਰੱਖਦਾ ਹੈ।