A nadie le gusta esperar. Más del 50% de los usuarios abandonan un sitio web si demora más de 3 segundos en cargarse.
El envío de grandes cargas útiles de JavaScript afecta la velocidad de tu sitio de manera significativa. En lugar de enviar todo el código JavaScript al usuario se cargue la primera página de la aplicación, divídelo en y enviar solo lo necesario al principio.
¿Por qué es beneficioso 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 código JavaScript al inicio, podemos minimizar el trabajo del subproceso principal durante este período crítico para lograr que las aplicaciones sean interactivas más rápido.
En lo que respecta a las Métricas web esenciales, reducir las cargas útiles de JavaScript descargadas al inicio contribuirá a mejorar los tiempos de Interacción con la siguiente pintura (INP). El razonamiento detrás de esto es que, al liberar el subproceso principal, la aplicación puede responder más rápidamente a las entradas del usuario reduciendo los costos de inicio relacionados con la ejecución y el análisis de JavaScript.
Según la arquitectura de tu sitio web (especialmente si este depende mucho de la renderización del cliente), si reduces el tamaño de las cargas útiles de JavaScript responsables de renderizar el lenguaje de marcado, es posible que se mejoren los tiempos de Largest Contentful Paint (LCP). Esto puede ocurrir cuando el navegador demora en descubrir el recurso LCP hasta que se completa el lenguaje de marcado del cliente o cuando el subproceso principal está demasiado ocupado para renderizar ese elemento LCP. Ambas situaciones pueden retrasar el tiempo de LCP de la página.
Medir
Lighthouse muestra una auditoría con errores cuando se dedica una cantidad de tiempo significativa para ejecutar todo el código JavaScript en una página.
Dividir el paquete de JavaScript para enviar solo el código necesario para la ruta inicial cuando cuando el usuario carga una aplicación. Esto minimiza la cantidad de secuencias de comandos se analizan y compilan, lo que agiliza los tiempos de carga de las páginas.
Los agrupadores de módulos populares, como webpack,
Parcel y
Resumen te permite dividir tus
paquetes mediante importaciones dinámicas.
Por ejemplo, considera el siguiente fragmento de código que muestra un ejemplo de un
Es 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 un
la importación dinámica para recuperarla 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 el envío del formulario. Para mejorar aún más el rendimiento de la página, carga previamente los fragmentos críticos para priorizarlos y recuperarlos más rápido.
Si bien el fragmento de código anterior es un ejemplo simple, las dependencias no es un patrón común en aplicaciones más grandes. Generalmente, la tercera las dependencias de las partes se dividen en un paquete de proveedor independiente que puede almacenarse en caché ya que no se actualizan con tanta frecuencia. Puedes leer más sobre cómo la SplitChunksPlugin puede te ayudarán a hacerlo.
La división a nivel de ruta o 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 Los frameworks populares que usan webpack proporcionan abstracciones para hacer la carga diferida más fácil que analizar las configuraciones por tu cuenta.