Utilizzo di Imagemin con webpack

Katie Hempenius

Configura il plug-in Webpack Imagemin

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

L'elemento webpack.config.js esistente per questo progetto ha copiato immagini da dalla directory images/ alla directory dist/, ma non è stata per comprimerle.

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

• In primo luogo, dichiara il plug-in Imagemin aggiungendo questo codice nella parte superiore webpack.config.js:

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

• A questo punto, aggiungi il seguente codice come ultimo elemento nell'array plugins[]. Questo aggiunge Imagemin all'elenco dei plug-in utilizzati da Webpack:

new ImageminPlugin()

✔✔ Fai il 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, potresti dover utilizzare l'opzione Schermo intero.
• Per comprimere le immagini, esegui webpack digitando il seguente comando 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 il tuo file PNG dei file, nonostante una compressione, superano comunque il limite consigliato. (le modalità development e production di webpack danno la priorità a cose diverse, è per questo che viene visualizzato questo avviso solo quando esegui il webpack in modalità di produzione.

Personalizza la configurazione di Imagemin per correggere questo avviso.

Personalizzare la configurazione di Imagemin

Aggiungi le impostazioni per comprimere le immagini PNG passando il seguente oggetto a ImageminPlugin():

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

Questo codice indica a Imagemin di comprimere i file PNG utilizzando il plug-in Pngquant. La 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 l'utilizzo di tutte le immagini in deve essere compresso al 50% di qualità, passa 0.5 come valore minimo e massimo.

✔✔ Fai il 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 per quanto riguarda i JPEG? Il progetto contiene anche immagini JPEG, quindi devi specificare come vengono compressi.

Personalizza la configurazione di Imagemin (continua)

Anziché utilizzare 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 consente di specificare una qualità di compressione per la compressione JPG. Abbiamo abbia già installato il plug-in Mozjpeg in questo Glitch, ma dovrai modifica il tuo file webpack.config.js:

• Inizializza il plug-in imagemin-mozjpeg aggiungendo la seguente riga alla parte superiore di webpack.config.js file:

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

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

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

Questo codice indica a webpack di comprimere i file JPG fino a una qualità pari a 50 (0 è il valore peggiore; 100 è il massimo) utilizzando il plug-in Mozjpeg.

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

Tuttavia, se aggiungi impostazioni per plug-in non predefiniti (ad esempio, Mozjpeg), devono essere aggiunti includendoli nell'array corrispondente a la proprietà plugins.

✔✔ Fai il check-in

Il tuo codice ora 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 webpack:

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

Evviva! Le modifiche dovrebbero aver corretto gli avvisi Webpack.

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

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

• Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi Schermo intero .
• Esegui il controllo delle prestazioni di Lighthouse (Lighthouse > Opzioni > Prestazioni). sulla versione live di Glitch e verifica che l'opzione Codifica in modo efficiente il controllo delle immagini è stato superato.

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