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 डिफॉल्टने वेगवान आहे, परंतु मोठ्या अॅपला जाणीवपूर्ण अनुकूलनकी आवश्यकता आहे: आळस लोडिंग बंडल संकुचित करण्यासाठी, v-if/v-show योग्यरित्या निवडा, स्थिर की वापरा, मोठ्या डेटावर अत्यधिक प्रतिक्रियाशीलता टाळा (shallowRef/freeze), computed/v-memo सह कॅश करा, आणि लांब सूचीचे वर्चुअलायजेशन करा.
कोणते तंत्र कोणत्या अडचणीला संबोधित करते हे जाणून घेणे — आणि अनुमान ऐवजी DevTools/Lighthouse सह मापन करणे — हे वाढणारे Vue अॅप प्रतिक्रिया देणारे ठेवते.