Reducir 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 grandes cargas útiles de JavaScript impacta significativamente en la velocidad de su sitio. En lugar de enviar todo el código JavaScript a su usuario tan pronto como se cargue la primera página de su aplicación, divida su paquete en varias partes y envíe al principio solo lo necesario.
Medición #
Lighthouse muestra una auditoría como fallida cuando se tarda una cantidad significativa de tiempo en ejecutar todo el JavaScript en una página.
Divida 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 script que necesita ser analizado y compilado, resultando en tiempos de carga de página más rápidos.
Los paquetes de módulos populares comowebpack, Parcel y Rollup le permiten dividir sus paquetes mediante importaciones dinámicas. Por ejemplo, considere el siguiente fragmento de código que muestra un ejemplo de una función someFunction que se activa al enviar 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 para 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 dentro del módulo no se incluye en el paquete inicial y ahora se carga de forma diferida o se da al usuario solo cuando es necesario tras el envío del formulario. Para un rendimiento de la página aún mejor, precargue fragmentos críticos para 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 del proveedor aparte, que se puede almacenar en caché ya que no se actualizan con tanta frecuencia. Puede leer más sobre cómo SplitChunksPlugin puede ayudarlo con esto.
Dividir código a nivel de ruta o componente cuando se usa un framework del lado del cliente es un enfoque más simple para la carga diferida de diferentes partes de su aplicación. Muchos frameworks populares que utilizan webpack ofrecen abstracciones para que la carga diferida sea más fácil que meterse en las configuraciones usted mismo.