L-ittir-razzjonalizzazzjoni tal-prestazzjoni Vue tingħaġġ it-tħossod tal-bundle, l-effiċjenza tar-rendering, u l-ispiża ta' reattività. Hawn huma t-tekniki bl-akbar impatt.
1. Code splitting / lazy loading
js
routes = [{ : , : () }];
= ( ());
L-ittir-razzjonalizzazzjoni tal-prestazzjoni Vue tingħaġġ it-tħossod tal-bundle, l-effiċjenza tar-rendering, u l-ispiża ta' reattività. Hawn huma t-tekniki bl-akbar impatt.
routes = [{ : , : () }];
= ( ());
L-ikbar vittorja tat-tagħbija inizjali: tħallax tispeċċ kodiċi li l-utent għadu m'għandux bżonn.
<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
Reattività profonda fuq objetti kbar hi għali; shallowRef/shallowReactive/Object.freeze jevitaw li jintlob data li m'għandux bżonj miexja.
<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 huwa veloċi b'diefault, iżda l-apps kbar jeħtieġu ittir-razzjonalizzazzjoni intenzjonali: lazy-load biex jtnaqqas il-bundle, agħżel v-if/v-show kif suppost, uża virtual stabbli, evita l-reattività żejda fuq data kbira (shallowRef/freeze), cache b' computed/v-memo, u virtualizza listi twal.
Il-għarfien liema teknika tindirizza liema collo ta' bottleneck — u taġħmir b'DevTools/Lighthouse minflok ma tipprekaw — dan hu dik li żżomm app Vue li qed tikber reattiva.