¿Cómo optimizas el rendimiento en una aplicación Vue?

Question

Accepted Answer

La optimización del rendimiento de Vue abarca el tamaño del paquete, la eficiencia de renderizado y el costo de la reactividad. Aquí están las técnicas de mayor impacto. ## 1. Code splitting / lazy loading ```js // lazy-load routes and heavy components → smaller initial bundle const routes = [{ path: "/admin", component: () => import("./Admin.vue") }]; const Chart = defineAsyncComponent(() => import("./Chart.vue")); ``` La mayor ganancia en la carga inicial: no envíes código que el usuario aún no necesita. ## 2. Usa v-show vs v-if apropiadamente ```vue

``` ## 3. Siempre usa una :key estable en v-for ```vue

``` ## 4. Evita la reactividad innecesaria ```js 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 ``` La reactividad profunda en objetos enormes es costosa; `shallowRef`/`shallowReactive`/`Object.freeze` evitan rastrear datos que no lo necesitan. ## 5. Computed (en caché) en lugar de methods para valores derivados ```vue

``` ## 6. v-once / v-memo para contenido estático o raramente cambiante ```vue

...

``` ## 7. Virtualiza listas largas ```text Rendering 10,000 rows kills performance → use vue-virtual-scroller / TanStack Virtual to render only the visible rows. ``` ## 8. Optimiza imágenes y considera SSR/SSG (Nuxt) para First Paint ## Medición ```text Vue DevTools (component render timings, why a component re-rendered) build output / rollup-plugin-visualizer → bundle composition Lighthouse → Core Web Vitals ``` ## Por qué es importante Vue es rápido por defecto, pero las aplicaciones grandes necesitan optimización deliberada: **lazy-load** para reducir paquetes, elige `v-if`/`v-show` correctamente, usa claves estables, evita reactividad excesiva en datos grandes (`shallowRef`/`freeze`), almacena en caché con `computed`/`v-memo` y virtualiza listas largas. Saber qué técnica aborda qué cuello de botella—y medir con DevTools/Lighthouse en lugar de adivinar—es lo que mantiene una aplicación Vue en crecimiento receptiva.