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 ஆல் ক্যாச் செய்யவும், மற்றும் நீண்ட பட்டியல்களைவ்ர்চுவலைஸ் செய்யவும்.
ஏ தักษmatically தெரிவுக்குட்பட்டுள்ள மேம்பாடு நுட்பம் — மற்றும் DevTools/Lighthouse ஐ பயன்படுத்தி அளவீடு செய்தல் , অনুமानத்தைக் காட்டிலும் — வளரும் Vue பயன்பாட்டை மாறியாக வைத்திருப்பதாகும்.