No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Optimización de Imágenes y Uso de CDN en Webpack

12/22
Recursos

¿Cómo optimizar imágenes en tu proyecto utilizando Webpack?

Optimizar los recursos de un proyecto es crucial para mejorar su rendimiento, y las imágenes son un componente importante. Al aprender a incorporarlas de manera eficiente, podemos reducir tiempos de carga y mejorar la experiencia del usuario. A continuación, exploraremos cómo añadir y optimizar imágenes con Webpack y la importancia de los CDNs en este proceso.

¿Cómo agregar imágenes al proyecto?

Para comenzar, necesitamos incorporar la imagen en nuestro proyecto. Tradicionalmente, las imágenes pueden provenir de una API, pero para optimizarlas desde el inicio, es ideal tenerlas localmente.

  1. Crear una carpeta "assets": En la raíz de tu proyecto, crea una carpeta llamada assets para almacenar las imágenes.
  2. Descargar la imagen: Utiliza el enlace proporcionado por tu instructor para obtener la imagen de ejemplo que será optimizada.
  3. Ubicarla en la carpeta "assets": Colócala dentro de la carpeta que creaste.

¿Cómo integrar la imagen en un componente con Webpack?

Una vez descargada e incorporada la imagen en la carpeta adecuada, es momento de integrarla en tu componente de la aplicación.

  1. Agregar un alias en configuración de Webpack: Define un alias en el archivo de configuración de desarrollo de Webpack para facilitar el acceso a los recursos:

    alias: {
      '@assets': path.resolve(__dirname, 'src/assets')
    }
    
  2. Importar la imagen en el componente: Abre el archivo del componente donde la imagen será utilizada e impórtala usando el alias:

    import logo from '@assets/logo-gndx.png';
    
  3. Insertar la imagen en el componente: Utiliza la etiqueta img para insertar la imagen dentro del JSX o HTML del componente, asegurándote de incluir atributos como alt y width:

    <img src={logo} alt="Logo" width="32" />
    

¿Cómo optimizar imágenes con Webpack?

La optimización de imágenes es un proceso que reduce el tamaño del archivo sin sacrificar su calidad. Esto puede lograrse integrando configuraciones específicas en Webpack.

  1. Configurar reglas de Webpack para imágenes: Añade reglas específicas para procesar imágenes en tu archivo de configuración:

    module.exports = {
      module: {
        rules: [
          {
            test: /\.(png|jpg|jpeg|gif)$/i,
            type: 'asset/resource'
          }
        ]
      }
    }
    
  2. Compilar el proyecto para aplicar cambios: Utiliza la terminal para compilar el proyecto y verificar que los cambios se reflejan correctamente:

    npm run start
    

Al seguir estos pasos, tu proyecto puede manejar imágenes de manera más eficiente, mejorando así los tiempos de carga y la experiencia del usuario final. La optimización adecuada de recursos es clave en el desarrollo moderno de aplicaciones web, ¡y ahora tienes las herramientas para implementarla!

Recuerda siempre verificar las mejoras tras optimizar, y te animo a continuar experimentando e integrando nuevas tecnologías para enriquecer tus habilidades como desarrollador.

Aportes 1

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Manejo de assets en Webpack(Imágenes y CDN)

Puedes usar una forma de importar las imágenes haciendo un import de las mismas y generando una variable.
No es necesario instalar ninguna dependencia, webpack ya lo tiene incluido.

  • Creamos la carpeta assets dentro de src y dentro de assets descargamos la siguiente imagen:
    imagen: https://i.ibb.co/fr7JzwW/logo-gndx.png
  • Agregamos un nuevo alias en webpack.config.dev.js, porque primero debemos probarla en dev(desarrollo) antes de llevarlo a producción:
      '@assets': path.resolve(__dirname, 'src/assets'),

y añadimos en rules una nueva regla para los assets(es importante que en type se escriba asset y no assets):

      {
        test: /\.(png|jpg)$/,
        type: 'asset/resource',
      },

En src > components > Header.jsx:

  • importamos el logo
import logo from '@assets/logo-gndx.png';
  • Agregamos el logo en nuestro h1:
    <h1 className="Header-title">
      <Link to="/">
        <img src={logo} alt="logo" width="32" />
        Platzi Store
      </Link>
    </h1>

Por último copiamos el alias y la nueva regla de webpack.config.dev.js en webpack.config.js.
npm run build => para probar.