Configura presupuestos de rendimiento con webpack

Milica Mihajlija

Webpack combina todos tus archivos importados y los empaqueta en uno o más archivos de salida conocidos como paquetes. Los paquetes son útiles, pero a medida que tu app crezca, también lo harán los paquetes. Debes supervisar los tamaños de los paquetes para asegurarte de que no se vuelvan demasiado grandes y afecten el tiempo que tarda en cargarse tu aplicación. Webpack admite la configuración de presupuestos de rendimiento según el tamaño de los recursos y puede supervisar los tamaños de los paquetes por ti.

Para verlo en acción, esta es una app que cuenta los días que quedan hasta Año Nuevo. Se compiló con React y moment.js. (al igual que las apps del mundo real que cada vez más dependen de frameworks y bibliotecas). 😉).

Una app que cuenta los días que quedan hasta el Año Nuevo

Medir

Este codelab ya contiene la app empaquetada con webpack.

  1. Haz clic en Remix para editar para que el proyecto sea editable.
  2. Haz clic en Terminal (nota: si no aparece el botón Terminal, es posible que debas usar la opción Pantalla completa).
  3. Para obtener una lista de recursos con codificación de colores y sus tamaños, escribe webpack en la consola.
webpack

El paquete principal se destaca en amarillo porque es superior a 244 KiB (250 KB).

Salida de Webpack que muestra un tamaño de paquete de 323 KiB
Te advierte Webpack sobre un paquete JS voluminoso ⚠️

Estas advertencias están habilitadas de forma predeterminada en el modo de producción, y el umbral predeterminado es de 244 KiB sin comprimir, tanto para los recursos como para los puntos de entrada (la combinación de todos los recursos utilizados durante la carga inicial de una página).

Advertencia de Webpack que indica que el recurso supera el límite de tamaño recomendado
La advertencia de Webpack sobre un paquete JS voluminoso ⚠️

Webpack no solo te advertirá, sino que también te dará una recomendación sobre cómo reducir el tamaño de tus paquetes. Puedes obtener más información sobre las técnicas recomendadas en Fundamentos de la Web.

Recomendación de optimización del rendimiento de Webpack
Recomendación de optimización del rendimiento de Webpack 💁

Establece un presupuesto de rendimiento personalizado

Un presupuesto de rendimiento adecuado dependerá de la naturaleza de tu proyecto. Siempre es mejor hacer tu propia investigación. Una buena regla de oro es entregar menos de 170 KB de recursos de ruta crítica comprimidos o reducidos.

Para esta sencilla demostración, intenta ser aún más conservador y establece el presupuesto en 100 KB (97.7 KiB). En webpack.config.js, agrega lo siguiente:

module.exports = {
  //...
  performance: {
    maxAssetSize: 100000,
    maxEntrypointSize: 100000,
    hints: "warning"
  }
};

El nuevo presupuesto de rendimiento se establece en bytes:

  • 100,000 bytes para recursos individuales (maxAssetSize)
  • 100,000 bytes para el punto de entrada (maxEntrypointSize)

En este caso, solo hay un paquete que también actúa como punto de entrada.

Los valores posibles para hints son los siguientes:

  1. warning (opción predeterminada): Muestra un mensaje de advertencia amarillo, pero la compilación se aprueba. Es mejor usar esto en entornos de desarrollo.
  2. error: Muestra un mensaje de error en rojo, pero la compilación aún se aprueba. Se recomienda este parámetro de configuración para las compilaciones de producción.
  3. false: No se muestran advertencias ni errores.
Error de rendimiento de Webpack en fuente roja
“Error” de sugerencia de rendimiento de Webpack 🚨

Optimizar

El propósito de un presupuesto de rendimiento es advertirte sobre los problemas de rendimiento antes de que se vuelvan demasiado difíciles de solucionar. Siempre hay más de una manera de compilar una app, y algunas técnicas permitirán tiempos de carga más rápidos. (muchos están documentados aquí en Optimiza tu código JavaScript). 🤓).

Los frameworks y las bibliotecas facilitan la vida de los desarrolladores, pero a los usuarios finales no les importa cómo se compilan las apps, solo que sean funcionales y rápidas. Si superas el presupuesto de rendimiento, es hora de pensar en posibles optimizaciones.

En el mundo real, los frameworks del cliente grandes suelen ser difíciles de reemplazar, por lo que es importante usarlos con prudencia. Con un poco de investigación, a menudo puedes encontrar alternativas más pequeñas a las bibliotecas populares que hacen el trabajo igual de bien (date-fns es una buena alternativa para moment.js). A veces, tiene más sentido no usar un framework o una biblioteca si tiene un impacto significativo en el rendimiento.

Quitar el código no utilizado es una buena manera de optimizar las apps que incluyen bibliotecas de terceros grandes. En la guía para quitar el código sin usar, se explica este proceso en detalle. Aquí tienes una forma rápida de volver a escribir el código de cuenta regresiva sin usar moment.js.

En app/components/Countdown.jsx, quita lo siguiente:

const today = moment();
const yearEnd = moment().endOf('year');
const daysLeft = yearEnd.diff(today, 'days');

Y borra esta línea:

const moment = require('moment');

Requiere un poco de matemáticas, pero puedes implementar la misma cuenta regresiva con JavaScript básico:

const today = new Date();
const year = today.getFullYear();
const yearEnd = new Date(year,11,31); //months are zero indexed in JS
const timeDiff = Math.abs(yearEnd.getTime() - today.getTime());
const daysLeft = Math.ceil(timeDiff / (1000 * 3600 * 24));

Ahora, quita moment.js de package.json y vuelve a ejecutar webpack en la consola para compilar el paquete optimizado.

¡Listo! Redujiste 223 KiB (230 KB) y la app está dentro del presupuesto.🎉

El resultado del tamaño del paquete de Webpack después de la optimización es de 97.7 KiB.

Supervisar

Configurar un presupuesto de rendimiento en webpack solo requiere un par de líneas de código y te advertirá si alguna vez agregas (accidentalmente) una gran dependencia. Se suele decir que “lo que no se ve, no existe”, pero webpack puede garantizar que estés al tanto de las implicaciones de rendimiento en todo momento.