Análisis del bundle y eliminación de código sin usar
Lea informes del bundle, encuentre módulos grandes y reduzca su tamaño con código compatible con tree-shaking: exports con nombre de ESM, sin efectos secundarios de nivel superior y carga diferida cuando resulte adecuada.
Análisis del bundle y eliminación de código sin usar es una lección gratuita de React Academy en CoddyKit. Esta es la lección 2 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 React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 3 lecciones en total.
¿Por qué analizar los bundles?
Objetivo: reducir el tamaño del bundle.
- Lea los informes del bundle
- Adopte ESM compatible con tree-shaking
- Cargue de forma diferida las pantallas poco frecuentes
Indicadores en los informes
- Dependencias grandes (gráficos y librerías de fechas)
- Versiones duplicadas
- Efectos secundarios de nivel superior
- Imports predeterminados que cargan paquetes completos
Exports con nombre y sin efectos secundarios
Prefiera los exports con nombre y mantenga los módulos puros (sin efectos secundarios al importarlos).
<div id="root"></div>Sin efectos secundarios de nivel superior
Evite los efectos secundarios durante la importación; exponga funciones y llámelas después de importar.
<div id="root"></div>Carga diferida con React.lazy
Cargue de forma diferida las pantallas poco frecuentes para mantener pequeño el bundle inicial; muestre un fallback pequeño.
<div id="root"></div>Consejos y lista de comprobación
- Use exports con nombre de ESM
- Mantenga los módulos puros (sin trabajo durante la importación)
- Cargue de forma diferida las rutas y widgets poco frecuentes
- Prefiera alternativas más pequeñas (por ejemplo, dayjs en lugar de moment)
Comprobación de los fundamentos de tree-shaking
Repaso
Repaso: lea los informes del bundle, cambie a exports con nombre de ESM, elimine los efectos secundarios durante la importación y cargue de forma diferida las pantallas poco frecuentes para mantener ligero el bundle inicial.
Preguntas frecuentes
¿La lección «Análisis del bundle y eliminación de código sin usar» es gratis?
Sí — el texto completo de «Análisis del bundle y eliminación de código sin usar» 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 React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Análisis del bundle y eliminación de código sin usar»?
Lea informes del bundle, encuentre módulos grandes y reduzca su tamaño con código compatible con tree-shaking: exports con nombre de ESM, sin efectos secundarios de nivel superior y carga diferida cu… Practicas React 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 React Academy?
No se requiere experiencia previa. React 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 2 de 3.
¿Cuánto tiempo toma la lección «Análisis del bundle y eliminación de código sin usar»?
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 React Academy?
Sí. Cada lección de React 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
- Builds de desarrollo y producción, source maps y entornos
- Análisis del bundle y eliminación de código sin usar
- CI básica: lint → test → build