A nadie le gusta esperar. Más del 50% de los usuarios abandonan un sitio web si este demora más de 3 segundos en cargarse.
El envío de cargas útiles grandes de JavaScript afecta la velocidad de tu sitio de manera significativa. En lugar de enviar todo el código JavaScript al usuario en cuanto se carga la primera página de tu aplicación, divide el paquete en varias partes y envía solo lo necesario al principio.
¿Por qué es beneficioso dividir el código?
La división del código es una técnica que busca minimizar el tiempo de inicio. Cuando enviamos menos JavaScript en el inicio, podemos lograr que las aplicaciones sean interactivas más rápido, ya que minimizamos el trabajo del subproceso principal durante este período crítico.
En cuanto a las métricas web esenciales, reducir las cargas útiles de JavaScript que se descargan durante el inicio contribuirá a mejorar los tiempos de Interaction to Next Paint (INP). El motivo es que, al liberar el subproceso principal, la aplicación puede responder a las entradas del usuario más rápidamente, ya que reduce los costos de inicio relacionados con el análisis, la compilación y la ejecución de JavaScript.
Según la arquitectura de tu sitio web, en especial si depende en gran medida del procesamiento del cliente, reducir el tamaño de las cargas útiles de JavaScript responsables del procesamiento del lenguaje de marcado puede mejorar los tiempos de Largest Contentful Paint (LCP). Esto puede ocurrir cuando el navegador tarda en descubrir el recurso del LCP hasta después de que se completa el lenguaje de marcado del cliente o cuando el subproceso principal está demasiado ocupado para renderizar ese elemento del LCP. Ambas situaciones pueden retrasar el tiempo del LCP de la página.
Medir
Lighthouse muestra una auditoría con errores cuando se requiere una cantidad significativa de tiempo para ejecutar todo el código JavaScript en una página.
Divide el paquete de JavaScript para enviar solo el código necesario para la ruta inicial cuando el usuario carga una aplicación. Esto minimiza la cantidad de secuencias de comandos que se deben analizar y compilar, lo que genera tiempos de carga de páginas más rápidos.
Los agrupadores de módulos populares, como webpack, Parcel y Rollup, te permiten dividir tus paquetes con importaciones dinámicas.
Por ejemplo, considera el siguiente fragmento de código que muestra un ejemplo de un método someFunction que se activa cuando se envía un formulario.
import moduleA from "library";
form.addEventListener("submit", e => {
e.preventDefault();
someFunction();
});
const someFunction = () => {
// uses moduleA
}
Aquí, someFunction usa un módulo importado de una biblioteca en particular. Si este módulo no se usa en otro lugar, el bloque de código se puede modificar para usar una importación dinámica y recuperarlo solo cuando el usuario envíe el formulario.
form.addEventListener("submit", e => {
e.preventDefault();
import('library.moduleA')
.then(module => module.default) // using the default export
.then(() => someFunction())
.catch(handleError());
});
const someFunction = () => {
// uses moduleA
}
El código que compone el módulo no se incluye en el paquete inicial y ahora se carga de forma diferida o se proporciona al usuario solo cuando es necesario después del envío del formulario. Para mejorar aún más el rendimiento de la página, precarga los fragmentos críticos para priorizarlos y recuperarlos antes.
Si bien el fragmento de código anterior es un ejemplo simple, la carga diferida de dependencias de terceros no es un patrón común en aplicaciones más grandes. Por lo general, las dependencias de terceros se dividen en un paquete de proveedores independiente que se puede almacenar en caché, ya que no se actualizan con tanta frecuencia. Puedes obtener más información sobre cómo SplitChunksPlugin puede ayudarte a hacerlo.
Dividir en el nivel de la ruta o del componente cuando se usa un framework del cliente es un enfoque más simple para cargar de forma diferida diferentes partes de tu aplicación. Muchos frameworks populares que usan webpack proporcionan abstracciones para facilitar la carga diferida en comparación con la exploración de las configuraciones por tu cuenta.