Utilizzo di Imagemin con webpack

Katie Hempenius
Katie Hempenius
X

Configurazione del 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.

L'elemento webpack.config.js esistente per questo progetto ha copiato immagini dalla directory images/ alla directory dist/, ma non le comprime.

  • Fai clic su Remix per modificare per rendere il progetto modificabile.
  • Innanzitutto, dichiara il plug-in Imagemin aggiungendo questo codice all'inizio di webpack.config.js:
const ImageminPlugin = require('imagemin-webpack-plugin').default;
  • Poi, aggiungi il seguente codice come ultimo elemento dell'array plugins[]. Questa operazione aggiunge Imagemin all'elenco dei plug-in utilizzati dal webpack:
new ImageminPlugin()

✔︎ Check-in

Il file webpack.config.js completo ora 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 il webpack in modalità di produzione?

  • Esegui di nuovo il webpack, ma questa volta in modalità di produzione:
webpack --config webpack.config.js --mode production

Questa volta il webpack mostra un avviso per informarti che le dimensioni dei file PNG, nonostante alcune compressione, superano il limite consigliato. (le modalità development e production del webpack danno la priorità a cose diverse, motivo per cui viene visualizzato questo avviso solo quando il webpack viene eseguito in modalità di produzione).

Personalizza la 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 con una qualità al 50%, trasmetti 0.5 come valore minimo e massimo.

✔︎ Check-in

Il file webpack.config.js ora 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 file JPEG? Poiché il progetto contiene anche immagini JPEG, devi specificare anche come vengono compresse.

Personalizzare la configurazione di Imagemin (continua)

Anziché usare il plug-in predefinito di imagemin-webpack-plugin per la compressione JPG (imagemin-jpegtran), usa 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 in questo Glitch, ma dovrai modificare il tuo file webpack.config.js:

  • Inizializza il plug-in imagemin-mozjpeg aggiungendo la seguente riga nella parte superiore 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 al webpack di comprimere i file JPG in una qualità di 50 (0 è il peggiore; 100 è il migliore) utilizzando il plug-in Mozjpeg.

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

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

✔︎ Check-in

Il tuo codice dovrebbe avere il seguente aspetto:

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 il webpack e verifica i risultati con Lighthouse

  • Nella console, esegui nuovamente il webpack:
webpack --config webpack.config.js --mode production

Ottimo. Le modifiche apportate dovrebbero aver corretto gli avvisi del webpack.

webpack ti avvisa in caso di immagini di grandi dimensioni, ma non può indicare se le immagini sono non compresse o sottocompresse. Per questo è sempre opportuno usare Lighthouse per verificare le modifiche.

Il controllo delle prestazioni "Codifica in modo efficiente delle immagini" di Lighthouse può indicare se le immagini JPEG sulla pagina sono compresse in modo ottimale.

  • Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero schermo intero.
  • Esegui il controllo delle prestazioni di Lighthouse (Lighthouse > Opzioni > Prestazioni) sulla versione dal vivo di Glitch e verifica che il controllo Codifica efficiente delle immagini sia stato superato.

Superare il controllo "Codifica le immagini in modo efficiente" in Lighthouse

Success! Hai utilizzato Imagemin per comprimere in modo ottimale le immagini sulla pagina.