Utilizzo di Imagemin con webpack

Katie Hempenius

Per seguire questo codelab, apri questo Glitch in una seconda scheda.

Configura il plug-in webpack Imagemin

Questo Glitch contiene già webpack, webpack-cli e imagemin-webpack-plugin. Per aggiungere la configurazione per Imagemin, devi modificare il file webpack.config.js.

Il file webpack.config.js esistente per questo progetto copia le immagini dalla directory images/ alla directory dist/, ma non le comprime.

• Fai clic su Remixa per modificare per rendere modificabile il progetto.

Nota: perché dovresti copiare le immagini in una nuova cartella dist/? dist/ è l'abbreviazione di"distribution" (distribuzione) ed è una pratica abbastanza comune mantenere il codice, le immagini e così via originali separati dalle versioni distribuite perché potrebbero essere leggermente diversi.

• Innanzitutto, dichiara il plug-in Imagemin aggiungendo questo codice all'inizio di webpack.config.js:

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

• Quindi, aggiungi il seguente codice come ultimo elemento dell'array plugins[]. In questo modo, Imagemin viene aggiunto all'elenco dei plug-in utilizzati da webpack:

new ImageminPlugin()

Nota: perché aggiungerlo alla fine dell'array? In questo modo, Imagemin viene eseguito per ultimo, dopo tutti gli altri plug-in.

✔︎ Check-in

Il file webpack.config.js completo dovrebbe avere il seguente aspetto:

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()
  ]
}

Ora hai una configurazione webpack che comprime le immagini utilizzando Imagemin.

Esegui webpack

• Fai clic su Terminale (nota: se il pulsante Terminale non viene visualizzato, potrebbe essere necessario utilizzare l'opzione Schermo intero).
• Per comprimere le immagini, esegui webpack digitando il seguente comando nella console:

webpack --config webpack.config.js --mode development

Ma cosa succede se esegui webpack in modalità di produzione?

• Esegui di nuovo webpack, ma questa volta in modalità di produzione:

webpack --config webpack.config.js --mode production

Questa volta, webpack mostra un avviso che ti informa che i tuoi file PNG, nonostante una certa compressione, superano ancora il limite di dimensioni consigliato. (Le modalità development e production di webpack danno priorità a cose diverse, motivo per cui questo avviso viene visualizzato solo quando webpack viene eseguito in modalità di produzione.)

Personalizza la nostra configurazione di Imagemin per correggere questo avviso.

Personalizza la configurazione di Imagemin

Aggiungi le impostazioni per la compressione delle immagini PNG passando il seguente oggetto a ImageminPlugin():

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

Questo codice indica a Imagemin di comprimere i PNG utilizzando il plug-in Pngquant. Il campo quality utilizza un intervallo di valori min e max per determinare il livello di compressione: 0 è il più basso e 1 è il più alto. Per forzare la compressione di tutte le immagini al 50% della qualità, passa 0.5 sia come valore minimo che massimo.

✔︎ Check-in

Il file webpack.config.js dovrebbe avere il seguente aspetto:

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]}),
      })
  ]
}

E i JPEG? Il progetto contiene anche immagini JPEG, quindi devi specificare anche come vengono compresse.

Personalizza la configurazione di Imagemin (continua)

Anziché utilizzare il plug-in predefinito di imagemin-webpack-plugin per la compressione JPG (imagemin-jpegtran), utilizza il plug-in imagemin-mozjpeg. A differenza di Jpegtran, Mozjpeg ti consente di specificare una qualità di compressione per la compressione JPG. Abbiamo già installato il plug-in Mozjpeg per te in questo Glitch, ma dovrai modificare il file webpack.config.js:

• Inizializza il plug-in imagemin-mozjpeg aggiungendo la seguente riga all'inizio del file webpack.config.js:

const imageminMozjpeg = require('imagemin-mozjpeg');

• Aggiungi una proprietà plugins all'oggetto passato a ImageminPlugin(), in modo che l'oggetto ora abbia il seguente aspetto:

new ImageminPlugin({
  pngquant: ({quality: [0.5, 0.5]}),
  plugins: [imageminMozjpeg({quality: 50})]
})

Questo codice indica a webpack di comprimere i JPG con una qualità di 50 (0 è la peggiore; 100 è la migliore) utilizzando il plug-in Mozjpeg.

Nota: ti stai chiedendo perché Mozjpeg viene aggiunto all'array di plug-in, ma Pngquant no? Ottima domanda.

Se aggiungi le impostazioni per un plug-in predefinito di imagemin-webpack-plugin, puoi aggiungerle come coppia chiave-oggetto nell'oggetto passato a ImageminPlugin(). Le impostazioni di Pnquant ne sono un buon esempio.

Tuttavia, se aggiungi impostazioni per plug-in non predefiniti (ad esempio Mozjpeg), devi aggiungerle includendole nell'array corrispondente alla proprietà plugins.

✔︎ Check-in

Il tuo codice sarà simile al seguente:

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})]
    })
  ]
}

Esegui di nuovo webpack e verifica i risultati con Lighthouse

• Nella console, esegui nuovamente webpack:

webpack --config webpack.config.js --mode production

Evviva! Le modifiche dovrebbero aver risolto gli avvisi di webpack.

webpack ti avvisa della presenza di immagini di grandi dimensioni, ma non può dirti se le immagini non sono compresse o se sono compresse in modo insufficiente. Per questo motivo, è sempre consigliabile utilizzare Lighthouse per verificare le modifiche.

Il controllo del rendimento "Codifica le immagini in modo efficiente" di Lighthouse può farti sapere se le immagini JPEG della tua pagina sono compresse in modo ottimale.

• Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi Schermo intero .
• Esegui il controllo del rendimento di Lighthouse (Lighthouse > Opzioni > Rendimento) sulla versione live di Glitch e verifica che il controllo Codifica le immagini in modo efficiente sia stato superato.

Operazione riuscita. Hai utilizzato Imagemin per comprimere in modo ottimale le immagini della tua pagina.