Lazy Routes en Vue – Optimiza la carga de tu aplicación

Quizás alguna vez has trabajado en proyectos con Vue y te has encontrado con dos formas distintas de definir las rutas:

import HomeView from './HomeView.vue'
import AboutView from './AboutView.vue'

const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView },
]

Y otras veces algo así:

const routes = [
  { path: '/users/:id', component: () => import('./views/HomeView.vue') },
]

A simple vista parecen iguales, pero no lo son. La segunda forma tiene una ventaja clave: mejora el rendimiento de la aplicación.

Esta técnica se llama lazy loading de rutas. Básicamente, en lugar de descargar todos los componentes de golpe al inicio (aunque el usuario nunca los visite), cada vista se carga solo cuando el usuario navega a esa ruta.

Esto se traduce en:

• Menor tamaño inicial del bundle → la aplicación arranca más rápido.
• Carga bajo demanda → el navegador descarga solo lo necesario en cada momento.

En JavaScript esto es posible gracias al dynamic import (import()), una sintaxis que devuelve una promise y permite que el código se divida en chunks o “trozos” independientes. De esta forma, en lugar de tener un único archivo gigante con toda la aplicación, se generan varios fragmentos que el navegador va pidiendo conforme hacen falta.

En resumen, usar lazy routes significa que el usuario no tiene que descargarse toda la aplicación desde el principio, sino únicamente lo que realmente necesita en cada momento.