Frontend Academy · Lección

División de código y rutas diferidas

Use dynamic import() para dividir el bundle en los límites de las rutas, cargue componentes de React y Vue de forma diferida y supervise el tamaño de los fragmentos en la salida de compilación.

División de código y rutas diferidas es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. 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 Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Por qué dividir el código?

Un bundle monolítico de JavaScript obliga a cada visitante a descargar todas las líneas de código de la aplicación, incluso las correspondientes a funciones que nunca utiliza. La división de código separa el bundle en chunks que se cargan bajo demanda.

import() dinámico

import('./module') devuelve una Promise que se resuelve con el módulo. Los bundlers (Vite, webpack) detectan esto y generan un chunk independiente que se carga en tiempo de ejecución.

// Without split — entire heavy lib in main bundle:
import { generateChart } from 'heavy-chart-lib';

// With split — loaded only when needed:
button.addEventListener('click', async () => {
  const { generateChart } = await import('heavy-chart-lib');
  generateChart(data);
});

React.lazy(): división por componente

React.lazy(() => import('./Heavy')) crea un componente que carga su código únicamente cuando se renderiza por primera vez. Envuélvalo en <Suspense> para mostrar un contenido alternativo mientras se carga.

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Dashboard />
    </Suspense>
  );
}

División por rutas en React Router

Cada ruta obtiene su propio chunk: los usuarios solo descargan el código de las páginas que visitan.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { lazy, Suspense } from 'react';

const Home    = lazy(() => import('./pages/Home'));
const Profile = lazy(() => import('./pages/Profile'));
const Admin   = lazy(() => import('./pages/Admin'));

const router = createBrowserRouter([
  { path: '/',        element: <Suspense fallback={<Spinner/>}><Home /></Suspense> },
  { path: '/profile', element: <Suspense fallback={<Spinner/>}><Profile /></Suspense> },
  { path: '/admin',   element: <Suspense fallback={<Spinner/>}><Admin /></Suspense> }
]);

Componentes asíncronos de Vue 3

Vue ofrece defineAsyncComponent para aplicar el mismo patrón.

import { defineAsyncComponent } from 'vue';

const Dashboard = defineAsyncComponent(() =>
  import('./Dashboard.vue')
);

// Use in template like a normal component

Rutas diferidas de Vue Router

Vue Router admite importaciones dinámicas en las definiciones de rutas; se generan chunks independientes para cada ruta.

const routes = [
  { path: '/',        component: () => import('./pages/Home.vue') },
  { path: '/profile', component: () => import('./pages/Profile.vue') },
  { path: '/admin',   component: () => import('./pages/Admin.vue') }
];

Magic comments de webpack

Indique nombres de chunks y el comportamiento de prefetch mediante los «magic comments» de webpack dentro de la sentencia de importación.

const Profile = lazy(() =>
  import(/* webpackChunkName: "profile", webpackPrefetch: true */ './Profile')
);

// Vite supports a subset; @vite-ignore for special cases

Prefetch frente a preload

prefetch: descarga el chunk durante el tiempo de inactividad para las navegaciones que probablemente se realizarán a continuación. preload: descarga ahora con alta prioridad los chunks críticos de la ruta actual. Utilice prefetch al pasar el cursor sobre un enlace y preload para necesidades inminentes conocidas.

Analizador de bundles

Utilice rollup-plugin-visualizer (Vite) o webpack-bundle-analyzer para visualizar el tamaño de los chunks. Busque chunks demasiado grandes, dependencias duplicadas y bibliotecas que haya olvidado someter al tree-shaking.

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [visualizer({ open: true, gzipSize: true })]
};

División del chunk de dependencias

Separe las bibliotecas de terceros en un chunk de dependencias independiente que cambie con menos frecuencia que el código de la aplicación; así, los navegadores pueden mantenerlo en caché entre despliegues.

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-tooltip']
        }
      }
    }
  }
};

Cuándo NO dividir el código

Los chunks pequeños (de menos de 20 KB) perjudican más de lo que ayudan: la sobrecarga de HTTP supera el ahorro del bundle. No divida cada componente; hágalo en los límites de las rutas y alrededor de funciones realmente pesadas.

Comprobación rápida

¿Con qué debe combinarse el contenedor lazy() de React para renderizarse correctamente?

Resumen: división de código

import() dinámico genera chunks independientes. Utilice React.lazy y Suspense para dividir por componentes. Use componentes de ruta diferidos en React Router/Vue Router. Utilice prefetch para los chunks que probablemente se necesitarán a continuación y preload para los críticos. El analizador de bundles revela el código innecesario. Divida las bibliotecas de dependencias para mejorar la capacidad de almacenamiento en caché. Evite los microchunks de menos de 20 KB.

Preguntas frecuentes

¿La lección «División de código y rutas diferidas» es gratis?

Sí — el texto completo de «División de código y rutas diferidas» 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 Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «División de código y rutas diferidas»?

Use dynamic import() para dividir el bundle en los límites de las rutas, cargue componentes de React y Vue de forma diferida y supervise el tamaño de los fragmentos en la salida de compilación. Practicas Frontend 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 Frontend Academy?

No se requiere experiencia previa. Frontend 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 4 de 4.

¿Cuánto tiempo toma la lección «División de código y rutas diferidas»?

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 Frontend Academy?

Sí. Cada lección de Frontend 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

Core Web Vitals: LCP FID CLS
Auditorías y puntuación de Lighthouse
Optimización de imágenes: carga diferida y formato WebP
División de código y rutas diferidas

← Volver a Frontend Academy