Cómo usar Imagemin con webpack

Katie Hempenius
Katie Hempenius
X

Configura el complemento de Imagemin webpack

Este error ya contiene webpack, webpack-cli y imagemin-webpack-plugin Para agregar la configuración de Imagemin, necesitarás para editar tu archivo webpack.config.js.

El webpack.config.js existente para este proyecto ha estado copiando imágenes de del directorio images/ al directorio dist/, pero no comprimiéndolos.

  • Haz clic en Remix para editar para que el proyecto se pueda editar.
  • Primero, declara el complemento Imagemin agregando este código en la parte superior de webpack.config.js:
const ImageminPlugin = require('imagemin-webpack-plugin').default;
  • A continuación, agrega el siguiente código como el último elemento del array plugins[]. Esta Agrega Imagemin a la lista de complementos que usa Webpack:
new ImageminPlugin()

✔︎ Registro

Tu archivo webpack.config.js completo debería verse de la siguiente manera:

const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
     new CopyWebpackPlugin([{
       from: 'img/**/**',
       to: path.resolve(__dirname, 'dist')
     }]),
     new ImageminPlugin()
  ]
}

Ahora tienes una configuración de webpack que comprime imágenes con Imagemin.

Ejecutar webpack

  • Haz clic en Terminal. Nota: Si no ves el botón de la terminal, es posible que debas usar la opción de pantalla completa.
  • Para comprimir tus imágenes, ejecuta webpack escribiendo el siguiente comando en el consola:
webpack --config webpack.config.js --mode development

Pero ¿qué sucede si ejecutas webpack en modo de producción?

  • Vuelve a ejecutar webpack, pero esta vez en modo de producción:
webpack --config webpack.config.js --mode production

Esta vez, webpack muestra una advertencia que le informa que su archivo PNG de archivos, a pesar de la compresión, superan el límite de tamaño recomendado. (Los modos development y production de webpack priorizan diferentes elementos, que por eso solo ves esta advertencia cuando ejecutas webpack en modo de producción).

Personaliza la configuración de Imagemin para corregir esta advertencia.

Personaliza la configuración de Imagemin

Agrega la configuración para comprimir imágenes PNG pasando el siguiente objeto a ImageminPlugin():

{pngquant: ({quality: [0.5, 0.5]})}

Este código le indica a Imagemin que comprima los PNG mediante el complemento Pngquant. El El campo quality usa los rangos de valores min y max para determinar la nivel de compresión: 0 es el más bajo y 1 el más alto. Para forzar todas las imágenes se comprima al 50% de calidad, pasa 0.5 como el valor mínimo y máximo.

✔︎ Registro

Tu archivo webpack.config.js ahora debería verse de la siguiente manera:

const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([{
        from: 'img/**/**',
        to: path.resolve(__dirname, 'dist')
    }]),
    new ImageminPlugin({
      pngquant: ({quality: [0.5, 0.5]}),
      })
  ]
}

Pero ¿qué pasa con los JPEG? El proyecto también tiene imágenes JPEG, por lo que debes especificar cómo se comprimen.

Personaliza la configuración de Imagemin (continuación)

En lugar de usar el complemento predeterminado de imagemin-webpack-plugin para la compresión JPG (imagemin-jpegtran), usa el complemento imagemin-mozjpeg. A diferencia de Jpegtran, Mozjpeg te permite especificar la calidad de compresión de tu archivo JPG. Incluimos el complemento de Mozjpeg por ti en este Glitch, pero edita tu archivo webpack.config.js:

  • Inicializa el complemento imagemin-mozjpeg agregando la siguiente línea al parte superior de tu archivo webpack.config.js:
const imageminMozjpeg = require('imagemin-mozjpeg');
  • Agrega una propiedad plugins al objeto que se pasa a ImageminPlugin(), de modo que el objeto se ve así:
new ImageminPlugin({
  pngquant: ({quality: [0.5, 0.5]}),
  plugins: [imageminMozjpeg({quality: 50})]
})

Este código le indica a webpack que comprima los JPG en una calidad de 50 (0 es la peor; 100 es el mejor) con el complemento de Mozjpeg.

Si estás agregando la configuración de un complemento que es un complemento predeterminado de imagemin-webpack-plugin, se pueden agregar como un par clave-objeto en el objeto. pasado a ImageminPlugin(). La configuración de Pnquant es un buen ejemplo de esto.

Sin embargo, si agregas parámetros de configuración para complementos no predeterminados (por ejemplo, Mozjpeg), se deben agregar incluyéndolos en la matriz correspondiente a la propiedad plugins

✔︎ Registro

Tu código debería verse de la siguiente manera:

const imageminMozjpeg = require('imagemin-mozjpeg');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([{
      from: 'img/**/**',
      to: path.resolve(__dirname, 'dist')
    }]),
    new ImageminPlugin({
      pngquant: ({quality: [0.5, 0.5]}),
      plugins: [imageminMozjpeg({quality: 50})]
    })
  ]
}

Volver a ejecutar webpack y verificar los resultados con Lighthouse

  • En la consola, vuelve a ejecutar webpack:
webpack --config webpack.config.js --mode production

¡Hip, hip, hurra! Tus cambios deberían haber corregido las advertencias del paquete web.

webpack te advierte acerca de imágenes grandes, pero no puede decirte si estas sin comprimir ni comprimir. Por eso siempre es una buena idea usar Lighthouse para verificar los cambios.

"Codifica imágenes de forma eficiente" de Lighthouse la auditoría de rendimiento puede informarte si que las imágenes JPEG de tu página tengan una compresión óptima.

  • Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa
  • Ejecutar la auditoría de rendimiento de Lighthouse (Lighthouse > Opciones > Rendimiento) en la versión publicada de tu Glitch y verifica que la página Efficiently Encodely imágenes se aprobó.

Pasa "Codifica imágenes de forma eficiente" auditoría en Lighthouse

¡Listo! Usaste Imagemin para comprimir de manera óptima las imágenes en tu página.