Carga diferida y división del código
Divida los paquetes y cargue componentes y rutas de forma diferida.
Carga diferida y división del código es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.
Por qué importa el tamaño del bundle
Cuando todo se envía en un único archivo JavaScript grande, los usuarios esperan más tiempo hasta que aparece la primera pantalla. La división de código separa la aplicación en fragmentos más pequeños que se cargan solo cuando se necesitan, lo que reduce la descarga inicial y acelera el arranque.
Dynamic import()
La herramienta clave es la función dinámica import(). A diferencia de una importación estática al principio de un archivo, carga un módulo bajo demanda y devuelve una promesa. Los empaquetadores dividen cada importación dinámica en su propio fragmento.
const module = await import("./heavyModule.js")
module.doSomething()División de código por rutas
La mayor ventaja se obtiene al dividir por rutas, de modo que cada página carga su propio código. En Vue Router, pase una función que devuelva una importación dinámica en lugar de importar el componente directamente.
const routes = [
{
path: "/dashboard",
component: () => import("./views/Dashboard.vue")
}
]Rutas estáticas frente a rutas diferidas
Compare ambos estilos. La importación estática incluye el componente en el fragmento principal; la versión diferida crea un fragmento separado que solo se descarga cuando se visita la ruta.
// eager (always loaded)
import Dashboard from "./views/Dashboard.vue"
// lazy (loaded on demand)
const Dashboard = () => import("./views/Dashboard.vue")defineAsyncComponent
Para cargar un componente de forma diferida fuera del router, envuelva una importación dinámica con defineAsyncComponent. Vue lo carga solo la primera vez que se renderiza.
import { defineAsyncComponent } from "vue"
const Chart = defineAsyncComponent(() =>
import("./components/HeavyChart.vue")
)Registrar componentes asíncronos
Registre un componente asíncrono como cualquier otro y utilícelo en la plantilla. Vue gestiona la carga de forma transparente.
export default {
components: {
HeavyChart: defineAsyncComponent(() =>
import("./components/HeavyChart.vue")
)
}
}Estados de carga y error
La forma avanzada de defineAsyncComponent acepta opciones para mostrar un marcador de posición mientras se carga y una alternativa si se produce un error.
const Chart = defineAsyncComponent({
loader: () => import("./HeavyChart.vue"),
loadingComponent: Spinner,
errorComponent: LoadError,
delay: 200,
timeout: 5000
})Cargar componentes pesados de forma diferida
Son buenos candidatos para la carga diferida las partes pesadas o que se utilizan rara vez: gráficos, editores de texto enriquecido, mapas o cuadros de diálogo modales que solo algunos usuarios abren.
const RichEditor = defineAsyncComponent(() =>
import("./components/RichTextEditor.vue")
)
// only downloaded when the editor is actually shownCarga condicional con v-if
Combine un componente asíncrono con v-if para que su fragmento solo se descargue cuando el usuario lo active.
<template>
<button @click="showEditor = true">Edit</button>
<RichEditor v-if="showEditor" />
</template>Fragmentos con nombre para la depuración
Los comentarios mágicos al estilo de Webpack asignan nombres legibles a los fragmentos, lo que facilita inspeccionar la pestaña de red y el resultado de la compilación.
const Reports = () => import(
/* webpackChunkName: "reports" */ "./views/Reports.vue"
)Medir el impacto
Después de dividir el código, revise el resultado de la compilación o la pestaña de red del navegador. Debería ver varios archivos de fragmentos más pequeños en lugar de un único bundle grande, y la carga inicial debería descargar menos código.
Comprobación rápida
Compruebe sus conocimientos sobre la carga diferida.
Resumen
La división del código con import() dinámico reduce el bundle inicial. Use una función que devuelva un import para las rutas de carga diferida y defineAsyncComponent para los componentes bajo demanda, opcionalmente con estados de carga y error. Cargue de forma diferida las partes pesadas o que se usan rara vez para mantener rápido el inicio. A continuación, aprenderá a almacenar en caché y omitir trabajo innecesario mediante la memoización.
Preguntas frecuentes
¿La lección «Carga diferida y división del código» es gratis?
Sí — el texto completo de «Carga diferida y división del código» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Carga diferida y división del código»?
Divida los paquetes y cargue componentes y rutas de forma diferida. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.
¿Cuánto tiempo toma la lección «Carga diferida y división del código»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Carga diferida y división del código
- Técnicas de memoización
- Identificación y solución de cuellos de botella