Reduce las cargas útiles de JavaScript con la división de código

A nadie le gusta esperar. Más del 50% de los usuarios abandonan un sitio web si tarda más de 3 segundos en cargarse.

El envío de cargas útiles de JavaScript de gran tamaño afecta significativamente la velocidad de tu sitio. En lugar de enviar todo el código JavaScript al usuario en cuanto se carga la primera página de la aplicación, divide el paquete en varios fragmentos y envía solo lo necesario desde el principio.

¿Por qué es beneficiosa la división de código?

La división de código es una técnica que busca minimizar el tiempo de inicio. Cuando enviamos menos JavaScript al 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 lo que respecta a las Métricas web esenciales, reducir las cargas útiles de JavaScript que se descargan en el inicio contribuye a mejorar el Retraso de primera entrada (FID) y la Interacción a la siguiente pintura (INP). El motivo de esto es que, al liberar el subproceso principal, la aplicación puede responder a las entradas del usuario de forma más rápida mediante la reducción de los costos de inicio relacionados con el análisis de JavaScript, la compilación y la ejecución.

Según la arquitectura de tu sitio web, en especial si este depende en gran medida de la renderización del cliente, reducir el tamaño de las cargas útiles de JavaScript que son responsables de renderizar el lenguaje de marcado puede mejorar los tiempos de Largest Contentful Paint (LCP). Esto puede ocurrir cuando el navegador demora en descubrir el recurso LCP hasta que se complete el lenguaje de marcado del cliente o cuando el subproceso principal está demasiado ocupado como para procesar ese elemento LCP. Ambas situaciones pueden retrasar el tiempo de LCP para la página.

Medir

Lighthouse muestra una auditoría con errores cuando se tarda mucho tiempo en ejecutar todo el código JavaScript en una página.

Una auditoría de Lighthouse fallida en la que se muestran secuencias de comandos que tardan demasiado en ejecutarse.

Divide el paquete de JavaScript de modo que solo envíe el código necesario para la ruta inicial cuando el usuario cargue una aplicación. Esto minimiza la cantidad de secuencias de comandos que se deben analizar y compilar, lo que reduce los tiempos de carga de la página.

Los agrupadores de módulos populares, como webpack, Parcel y Rollup, te permiten dividir los paquetes mediante 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 desde 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ía 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 de enviar el formulario. Para mejorar aún más el rendimiento de la página, precarga los fragmentos críticos a fin de priorizarlos y recuperarlos antes.

Aunque 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 proveedor independiente que se puede almacenar en caché, ya que no se actualizan con tanta frecuencia. Obtén más información sobre cómo el SplitChunksPlugin puede ayudarte a hacerlo.

La división en el nivel de la ruta o del componente cuando se usa un framework del cliente es un enfoque más simple para la carga diferida de diferentes partes de tu aplicación. Muchos frameworks populares que usan webpack proporcionan abstracciones para facilitar la carga diferida que analizar la configuración por tu cuenta.