El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

El presupuesto de rendimiento es una técnica crucial para garantizar que las aplicaciones web se mantengan rápidas y eficientes. En este tema, aprenderemos qué es un presupuesto de rendimiento, cómo establecerlo y cómo utilizar Webpack para cumplir con estos objetivos.

¿Qué es un Presupuesto de Rendimiento?

Un presupuesto de rendimiento es un conjunto de límites que se establecen para varios aspectos del rendimiento de una aplicación web. Estos límites ayudan a mantener la aplicación rápida y eficiente. Los presupuestos de rendimiento pueden incluir:

Tamaño del paquete (bundle size)
Tiempo de carga inicial
Número de solicitudes HTTP
Tamaño de los recursos individuales (imágenes, CSS, JS, etc.)

Estableciendo un Presupuesto de Rendimiento

Para establecer un presupuesto de rendimiento, sigue estos pasos:

Identifica los objetivos de rendimiento: Define qué aspectos del rendimiento son más importantes para tu aplicación.
Mide el rendimiento actual: Utiliza herramientas como Lighthouse, WebPageTest o las DevTools de Chrome para medir el rendimiento actual de tu aplicación.
Establece límites claros: Basándote en las mediciones actuales y los objetivos de rendimiento, establece límites claros para cada aspecto del rendimiento.
Monitorea y ajusta: Monitorea continuamente el rendimiento de tu aplicación y ajusta los límites según sea necesario.

Usando Webpack para Cumplir con el Presupuesto de Rendimiento

Webpack ofrece varias herramientas y configuraciones que pueden ayudarte a cumplir con tu presupuesto de rendimiento. A continuación, veremos algunas de las más importantes.

Análisis de Paquetes

El análisis de paquetes te permite entender mejor cómo se compone tu aplicación y dónde puedes optimizar. Utiliza el plugin webpack-bundle-analyzer para visualizar el tamaño de los módulos en tu paquete.

npm install --save-dev webpack-bundle-analyzer

En tu archivo de configuración de Webpack (webpack.config.js):

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ... otras configuraciones
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

División de Código (Code Splitting)

La división de código permite dividir tu aplicación en varios archivos más pequeños, lo que puede mejorar el tiempo de carga inicial.

module.exports = {
  // ... otras configuraciones
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

Minificación

La minificación reduce el tamaño de los archivos eliminando espacios en blanco, comentarios y otros caracteres innecesarios. Webpack utiliza TerserPlugin para minificar el JavaScript.

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // ... otras configuraciones
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

Optimización de Imágenes

Las imágenes pueden ser una parte significativa del tamaño total de tu aplicación. Utiliza image-webpack-loader para optimizar las imágenes.

npm install --save-dev image-webpack-loader

En tu archivo de configuración de Webpack:

module.exports = {
  // ... otras configuraciones
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65,
              },
              // Optipng enabled by default
              optipng: {
                enabled: true,
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4,
              },
              gifsicle: {
                interlaced: false,
              },
              // Webp enables WEBP
              webp: {
                quality: 75,
              },
            },
          },
        ],
      },
    ],
  },
};

Limitar el Tamaño del Paquete

Puedes configurar Webpack para emitir advertencias o errores si el tamaño del paquete excede ciertos límites.

module.exports = {
  // ... otras configuraciones
  performance: {
    hints: 'warning', // 'error' para lanzar errores en lugar de advertencias
    maxEntrypointSize: 400000, // 400 KB
    maxAssetSize: 100000, // 100 KB
  },
};

Ejercicio Práctico

Ejercicio 1: Configuración de un Presupuesto de Rendimiento

Objetivo: Configurar un presupuesto de rendimiento para una aplicación Webpack.
Instrucciones:
- Instala webpack-bundle-analyzer y configúralo en tu proyecto.
- Configura la división de código en tu archivo webpack.config.js.
- Añade la minificación utilizando TerserPlugin.
- Optimiza las imágenes utilizando image-webpack-loader.
- Configura límites de tamaño para el paquete y los recursos individuales.

Solución

const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65,
              },
              optipng: {
                enabled: true,
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4,
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75,
              },
            },
          },
        ],
      },
    ],
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
  performance: {
    hints: 'warning',
    maxEntrypointSize: 400000,
    maxAssetSize: 100000,
  },
};

Conclusión

El presupuesto de rendimiento es una herramienta esencial para mantener tu aplicación web rápida y eficiente. Utilizando las configuraciones y herramientas de Webpack, puedes establecer y cumplir con los límites de rendimiento, asegurando una mejor experiencia para los usuarios. En el próximo módulo, exploraremos cómo integrar Webpack con otras herramientas y frameworks para mejorar aún más tu flujo de trabajo de desarrollo.

Presupuesto de Rendimiento

¿Qué es un Presupuesto de Rendimiento?

Estableciendo un Presupuesto de Rendimiento

Usando Webpack para Cumplir con el Presupuesto de Rendimiento

Análisis de Paquetes

División de Código (Code Splitting)

Minificación

Optimización de Imágenes

Limitar el Tamaño del Paquete

Ejercicio Práctico

Ejercicio 1: Configuración de un Presupuesto de Rendimiento

Solución

Conclusión

Curso de Webpack

Módulo 1: Introducción a Webpack

Módulo 2: Conceptos Básicos

Módulo 3: Configuración Avanzada

Módulo 4: Herramientas de Desarrollo

Módulo 5: Optimización para Producción

Módulo 6: Integraciones y Técnicas Avanzadas

Módulo 7: Proyectos del Mundo Real

Módulo 8: Solución de Problemas y Mejores Prácticas