Vue परफॉर्मेंस ऑप्टिमाइजेशन बंडल आकार, रेंडरिंग दक्षता और रिएक्टिविटी लागत को शामिल करता है। यहाँ सर्वोच्च प्रभाव वाली तकनीकें हैं।
1. कोड स्प्लिटिंग / लेजी लोडिंग
js
routes = [{ : , : () }];
= ( ());
Vue परफॉर्मेंस ऑप्टिमाइजेशन बंडल आकार, रेंडरिंग दक्षता और रिएक्टिविटी लागत को शामिल करता है। यहाँ सर्वोच्च प्रभाव वाली तकनीकें हैं।
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
विशाल ऑब्जेक्ट्स पर गहरी रिएक्टिविटी महंगी है; 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, v-if/v-show को सही तरीके से चुनें, स्थिर कुंजियां का उपयोग करें, बड़े डेटा पर अत्यधिक-रिएक्टिविटी से बचें (shallowRef/freeze), computed/v-memo के साथ कैश करें, और लंबी सूचियों को वर्चुअलाइज़ करें।
जानना कि कौन सी तकनीक किस बाधा को संबोधित करती है — और अनुमान लगाने के बजाय DevTools/Lighthouse के साथ मापना — यही है जो एक बढ़ते Vue ऐप को प्रतिक्रिया करने वाला रखता है।