Como probablemente sepa, un solo paquete de JavaScript monolítico, que alguna vez fue una buena práctica, ya no es el camino a seguir para las aplicaciones web modernas. La investigación ha demostrado que los paquetes más grandes aumentan el uso de memoria y los costos de CPU, especialmente en dispositivos móviles de gama media y baja.
webpack tiene muchas características para ayudarlo a lograr paquetes más pequeños y controlar la prioridad de carga de los recursos. El más atractivo de ellos es la división de código, que proporciona una forma de dividir su código en varios paquetes que luego se pueden cargar a pedido o en paralelo. Otro son las sugerencias de rendimiento que indican cuándo los tamaños de paquete emitidos cruzan un umbral específico en el momento de la compilación para que pueda realizar optimizaciones o eliminar código innecesario.
El comportamiento predeterminado para las compilaciones de producción en el paquete web es mostrar una advertencia cuando el tamaño de un activo o el punto de entrada supera los 250 KB (244 KB), pero puede configurar cómo se muestran las sugerencias de rendimiento y los umbrales de tamaño a través del performance objeto en tu webpack.config.js Archivo.
Las compilaciones de producción emitirán una advertencia de forma predeterminada para los activos de más de 250 KB de tamaño
Analizaremos esta función y cómo aprovecharla como primera línea de defensa contra las regresiones de rendimiento.
Primero, necesitamos establecer un presupuesto personalizado
Es posible que el umbral de tamaño predeterminado para los activos y los puntos de entrada (donde el paquete web busca comenzar a construir el paquete) no siempre se ajuste a sus requisitos, pero se pueden configurar para hacerlo.
Por ejemplo, mi blog es bastante mínimo y el tamaño de mi presupuesto es de unos modestos 50 KB (48,8 KB) tanto para los activos como para los puntos de entrada. Aquí está la configuración relevante en mi webpack.config.js:
module.exports = {
performance: {
maxAssetSize: 50000,
maxEntrypointSize: 50000,
}
};El maxAssetSize y maxEntrypointSize las propiedades controlan los tamaños de umbral para los activos y los puntos de entrada, respectivamente, y ambos se establecen en bytes. Esto último asegura que los paquetes creados a partir de los archivos enumerados en el entry El objeto (generalmente archivos JavaScript o Sass) no excede el umbral especificado, mientras que el primero aplica las mismas restricciones a otros activos emitidos por el paquete web (por ejemplo, imágenes, fuentes, etc.).
Vamos a mostrar un error si se superan los umbrales.
La advertencia predeterminada de webpack se emite cuando se superan los umbrales presupuestarios. Es lo suficientemente bueno para entornos de desarrollo pero insuficiente cuando se construye para producción. En su lugar, podemos desencadenar un error agregando el hints propiedad a la performance objeto y configurándolo en 'error':
module.exports = {
performance: {
maxAssetSize: 50000,
maxEntrypointSize: 50000,
hints: 'error',
}
};
Ahora se muestra un error en lugar de una advertencia
Hay otros valores válidos para hints propiedad, incluyendo 'warning' y false, donde false desactiva completamente las advertencias, incluso cuando se sobrepasan los límites especificados. No recomendaría usar false en modo de producción.
Podemos excluir ciertos activos del presupuesto.
webpack impone umbrales de tamaño para cada tipo de activo que emite. Esto no siempre es bueno porque se producirá un error si alguno de los activos emitidos supera el límite especificado. Por ejemplo, si configuramos el paquete web para procesar imágenes, obtendremos un error si solo una de ellas cruza el umbral.
Los presupuestos de rendimiento de webpack y los errores de límite de tamaño de activos también se aplican a las imágenes.
El assetFilter La propiedad se puede utilizar para controlar los archivos que se utilizan para calcular las sugerencias de rendimiento:
module.exports = {
performance: {
maxAssetSize: 50000,
maxEntrypointSize: 50000,
hints: 'error',
assetFilter: function(assetFilename) {
return !assetFilename.endsWith('.jpg');
},
}
};Esto le dice a webpack que excluya cualquier archivo que termine con un .jpg extensión cuando ejecuta los cálculos para sugerencias de rendimiento. Es capaz de una lógica más compleja para cumplir con todo tipo de condiciones para entornos, tipos de archivos y otros recursos.
La compilación ahora se ha realizado correctamente, pero es posible que deba buscar una forma diferente de controlar el tamaño de las imágenes.
Limitaciones
Si bien esta ha sido una buena solución de trabajo para mí, una limitación con la que me he encontrado es que se aplican los mismos umbrales presupuestarios a todos los activos y puntos de entrada. En otras palabras, todavía no es posible establecer varios presupuestos según sea necesario, como límites diferentes para JavaScript, CSS y archivos de imagen.
Dicho esto, hay una solicitud de extracción abierta que debería eliminar esta limitación, pero aún no se ha fusionado. Definitivamente algo a tener en cuenta.
Conclusión
Es muy útil establecer un presupuesto de rendimiento y hacer cumplir uno con el paquete web es algo que vale la pena considerar al comienzo de cualquier proyecto. Llamará la atención sobre el tamaño de sus dependencias y lo alentará a buscar alternativas más ligeras siempre que sea posible para evitar exceder el presupuesto.
Dicho esto, ¡el presupuesto por desempeño no termina aquí! El tamaño de los activos es solo una de las muchas cosas que afectan el rendimiento, por lo que aún queda mucho trabajo por hacer para garantizar que ofrece una experiencia óptima. Ejecutar una prueba de Lighthouse es un excelente primer paso para conocer otras métricas que puede usar, así como sugerencias para mejorar.
¡Gracias por leer y feliz codificación!