Vue কর্মক্ষমতা অপ্টিমাইজেশন বান্ডেল সাইজ, রেন্ডারিং দক্ষতা এবং প্রতিক্রিয়াশীলতা খরচ জুড়ে বিস্তৃত। এখানে সর্বোচ্চ প্রভাব সম্পন্ন কৌশলগুলি রয়েছে।
1. Code splitting / lazy loading
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 অ্যাপকে প্রতিক্রিয়াশীল রাখে।