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
ठूलो वस्तुहरूमा गहिराई 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 bundle को साइज घटाउन, v-if/v-show सही छनोट गर्नुहोस्, स्थिर कुञ्जीहरू प्रयोग गर्नुहोस्, ठूलो डेटामा over-reactivity बिर्सनुहोस् (shallowRef/freeze), computed/v-memo सँग क्यास गर्नुहोस्, र लामो सूचीहरू आभासीकरण गर्नुहोस्।
कुन प्रविधि कुन bottleneck सम्बोधन गर्छ भनेर जान्नु — र DevTools/Lighthouse सहित मापन गर्नु बजाय अनुमान गर्ने — एक बढ्दो Vue अनुप्रयोगलाई जवाफदेही राखेर रेस्पोन्सिभ राख्छ।