¿Qué es el Code Splitting?

El Code Splitting divide un bundle monolítico de JavaScript en fragmentos más pequeños que se cargan bajo demanda en lugar de por adelantado. Para los escaparates de composable-commerce es la forma más directa de reducir el first-party JS que se envía en la navegación inicial, lo que a su vez mejora el INP, el coste de hidratación y la capacidad de respuesta general.

Definición

Los bundlers modernos como Vite, Webpack, Turbopack, Rollup y esbuild generan fragmentos independientes en función de los límites de ruta, las importaciones dinámicas o los límites a nivel de componente. Frameworks como Next.js, Nuxt, Remix y SvelteKit dividen automáticamente por ruta y por layout, mientras que los desarrolladores añaden divisiones manuales con import() para componentes pesados como un reproductor de vídeo, un visor 3D o un paso del checkout. El navegador carga primero el fragmento de entrada y luego obtiene fragmentos adicionales a medida que el usuario navega o se montan componentes concretos. Una división eficaz exige prestar mucha atención a las dependencias compartidas para evitar código duplicado o cargas en cascada en la ruta crítica.

Por qué es importante

Cada kilobyte de JavaScript tiene un coste: análisis, compilación, ejecución y, en las aplicaciones basadas en frameworks, hidratación. Los bundles monolíticos de gran tamaño empeoran el INP y retrasan el tiempo hasta la interactividad en los dispositivos Android de gama media que todavía dominan el tráfico de comercio mundial. El Code Splitting mantiene el bundle inicial centrado en lo que la primera vista realmente necesita, aplazando el resto. Para los escaparates que integran analítica, ab-testing, personalización, widgets de motores de recomendación y chat, el ahorro se acumula rápidamente. La división también mejora la reutilización de la caché entre despliegues, ya que los fragmentos sin cambios permanecen en caché.

Casos de uso

Un escaparate headless típico divide por ruta, de modo que las PDP, las PLP y el checkout obtienen cada uno sus propios fragmentos. Los componentes pesados como un configurador, un widget de reseñas o un módulo de vídeo se cargan mediante importaciones dinámicas solo cuando se necesitan. Los React Server Components trasladan gran parte del trabajo de renderizado al servidor, dejando en el bundle del cliente únicamente las islas interactivas, lo que complementa al Code Splitting en Next.js. En Astro, la islands-architecture lleva la idea más allá al enviar cero JS por defecto e hidratar solo aquello que está marcado como interactivo. Combinado con la carga diferida (lazy-loading) de imágenes y scripts de terceros, el Code Splitting es una base innegociable para el trabajo moderno con Core Web Vitals.

Relacionado

Explora Composable Headless Frontend · Performance and Core Web Vitals.