Nivel Principiante
Imagina que tienes una aplicación muy grande. Si un usuario la abre, tiene que esperar a que se descargue toda, incluso las partes que no va a usar en ese momento. El Code Splitting es como si dividieras tu aplicación en varios paquetes pequeños. Cuando un usuario la abre, solo se descarga lo que necesita para ver la primera pantalla. Si navega a otra sección, entonces se descarga esa otra parte. Así, tu aplicación se siente mucho más rápida, porque el usuario no tiene que esperar a que se descargue todo.
Nivel Intermedio
El Code Splitting es una técnica de optimización de rendimiento web que divide el bundle de JavaScript de una aplicación en varios fragmentos o «chunks» que pueden ser cargados bajo demanda. En lugar de enviar un único archivo de JavaScript grande, el navegador solo descarga el código necesario para la parte de la aplicación que el usuario está viendo. El resto del código se descarga de forma asíncrona a medida que el usuario lo necesita, lo que mejora drásticamente los tiempos de carga inicial.
Esta técnica es fundamental para aplicaciones de una sola página (SPA) y se implementa a través de herramientas como Webpack o Rollup, que son capaces de identificar los puntos de división del código. El Code Splitting se utiliza junto con otras técnicas como Tree Shaking para reducir el tamaño del paquete y optimizar la carga del sitio.
Nivel Avanzado
Técnicamente, el Code Splitting es una forma de carga diferida (lazy loading) a nivel de código. El proceso se realiza en el build pipeline de la aplicación, donde un bundler como Webpack analiza el gráfico de dependencias del proyecto.
Los puntos de división del código se pueden definir de dos maneras:
- División Estática: El desarrollador define manualmente los puntos de división en el código. Por ejemplo, al importar un módulo completo de forma asíncrona con
import(), el bundler lo dividirá en un archivo separado. - División Dinámica: El bundler puede analizar el código y dividirlo automáticamente. Por ejemplo, si se utilizan importaciones dinámicas (
import('./module.js')), el bundler genera un nuevo chunk que se carga solo cuando se llama a esa función.
Un chunk de JavaScript se carga de forma asíncrona en el navegador, y una vez que está disponible, el runtime del bundler lo inyecta en la página. El Code Splitting es una de las técnicas de optimización más efectivas para reducir el tiempo de carga de las aplicaciones web, ya que disminuye el tamaño del «bundle» de JavaScript que bloquea la renderización, lo que resulta en un mejor «First Contentful Paint» (FCP) y una mejor Experiencia de Usuario (UX).
