Conceptos de bundling: tree shaking y code splitting
Comprenda cómo los empaquetadores eliminan exportaciones no utilizadas mediante tree shaking y dividen la salida en fragmentos para acelerar la carga inicial de la página.
Conceptos de bundling: tree shaking y code splitting 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.
¿Qué hace un bundler?
Un bundler (Vite, webpack, Rollup, Parcel) lee los archivos de código fuente, resuelve las importaciones, transforma el código (lo transpila, minifica y optimiza) y genera archivos que el navegador puede cargar de forma eficiente.
Grafo de módulos
El bundler parte de un punto de entrada y sigue cada importación para construir un grafo de módulos: un mapa completo de todo el código que usa la aplicación. Este grafo es la base de todas las optimizaciones.
Tree shaking — eliminación de código muerto
Tree shaking analiza el grafo de módulos y elimina las exportaciones que nunca se importan. Solo las importaciones estáticas de módulos ES permiten aplicar tree shaking; CommonJS require() es dinámico y no se puede analizar de forma estática.
// utils.js
export const add = (a, b) => a + b; // used → included
export const multiply = (a, b) => a * b; // never imported → removed
// app.js
import { add } from './utils.js';
console.log(add(2, 3));Efectos secundarios y sideEffects: false
Si su biblioteca no tiene efectos secundarios (solo reexportaciones puras), añada "sideEffects": false a package.json. Esto indica a los bundlers que pueden eliminar de forma segura cualquier archivo de su paquete que no se importe.
// package.json of a library:
{
"sideEffects": false
// or list files with side effects:
"sideEffects": ["./src/polyfills.js"]
}División de código
La división de código separa el bundle en varios chunks que se cargan bajo demanda. El chunk principal se mantiene pequeño para acelerar la carga inicial. Los chunks secundarios solo se cargan cuando son necesarios (rutas diferidas, activadores de funcionalidades).
División por puntos de entrada
Las aplicaciones multipágina tienen varios puntos de entrada, cada uno de los cuales genera su propio bundle. El código compartido (por ejemplo, React) se extrae automáticamente a un chunk compartido.
División mediante importaciones dinámicas
Cada llamada dinámica a import() crea un punto de división. El bundler genera un chunk independiente para el módulo cargado de forma diferida y todas sus dependencias exclusivas.
// vite / rollup automatically creates a separate chunk:
const Admin = lazy(() => import('./Admin'));
const Reports = lazy(() => import('./Reports'));División del código de proveedores
El código de node_modules cambia pocas veces. Extráigalo a un chunk de proveedores con un TTL de caché largo. Los usuarios que tengan el chunk de proveedores en la caché solo volverán a descargar el chunk de la aplicación cuando haya actualizaciones.
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: { vendor: ['react', 'react-dom'] }
}
}
}Minificación
Los minificadores (esbuild, terser) eliminan los espacios en blanco, cambian los nombres de las variables por letras individuales y aplican otras reducciones. Una aplicación típica de React se reduce entre un 60 y un 70 % después de la minificación.
Hash basado en el contenido
Los bundlers añaden un hash del contenido del archivo al nombre: index-a1b2c3.js. Cuando cambia el contenido, cambia el hash, cambia el nombre del archivo y el navegador obtiene el archivo nuevo. Los chunks que no cambian se almacenan en caché indefinidamente.
Mapas de origen
Los mapas de origen relacionan la salida minificada con el código fuente original. Se generan por separado (no se envían a los usuarios) y DevTools los usa para la depuración. Actívelos con build.sourcemap: true.
Comprobación rápida
¿Cuál es el requisito principal para que funcione el tree shaking?
Resumen: conceptos de bundling
Los bundlers resuelven el grafo de módulos, aplican tree shaking a las exportaciones no utilizadas (requiere ESM estático), dividen el código en chunks para la carga diferida, extraen el código de proveedores para facilitar la caché, minifican la salida y añaden hashes de contenido para invalidar la caché. Los mapas de origen permiten depurar código minificado.
Preguntas frecuentes
¿La lección «Conceptos de bundling: tree shaking y code splitting» es gratis?
Sí — el texto completo de «Conceptos de bundling: tree shaking y code splitting» 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 «Conceptos de bundling: tree shaking y code splitting»?
Comprenda cómo los empaquetadores eliminan exportaciones no utilizadas mediante tree shaking y dividen la salida en fragmentos para acelerar la carga inicial de la página. 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 «Conceptos de bundling: tree shaking y code splitting»?
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
- Módulos ES: import export y dynamic import
- npm y package.json: dependencias y scripts
- Vite: servidor de desarrollo y build
- Conceptos de bundling: tree shaking y code splitting