Menggunakan Imagemin dengan webpack

Katie Hempenius

Untuk mengikuti codelab ini, buka Glitch ini di tab kedua.

Menyiapkan plugin webpack Imagemin

Glitch ini sudah berisi webpack, webpack-cli, dan imagemin-webpack-plugin. Untuk menambahkan konfigurasi untuk Imagemin, Anda memerlukan untuk mengedit file webpack.config.js Anda.

webpack.config.js yang ada untuk project ini telah menyalin gambar dari direktori images/ ke direktori dist/ tetapi belum mengompresinya.

• Klik Remix to Edit agar project dapat diedit.

Catatan: Mengapa Anda perlu menyalin gambar ke folder dist/ baru? dist/ adalah singkatan dari "distribution" dan memisahkan kode asli, gambar, dll. dari versi terdistribusinya karena kode asli mungkin sedikit berbeda adalah praktik yang umum dilakukan.

• Pertama, deklarasikan plugin Imagemin dengan menambahkan kode ini di bagian atas webpack.config.js:

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

• Selanjutnya, tambahkan kode berikut sebagai item terakhir dalam array plugins[]. Ini menambahkan Imagemin ke daftar plugin yang digunakan webpack:

new ImageminPlugin()

Catatan: Mengapa menambahkannya di akhir array? Menambahkannya di sana akan memastikan bahwa Imagemin berjalan terakhir, setelah semua plugin lainnya.

✔︎ Check in

File webpack.config.js lengkap Anda sekarang akan terlihat seperti ini:

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

Anda sekarang memiliki konfigurasi webpack yang mengompresi gambar menggunakan Imagemin.

Jalankan webpack

• Klik Terminal (catatan: jika tombol Terminal tidak muncul, Anda mungkin perlu menggunakan opsi Layar penuh).
• Untuk mengompresi gambar Anda, jalankan webpack dengan mengetikkan perintah berikut ke dalam konsol:

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

Tetapi apa yang terjadi jika Anda menjalankan webpack dalam mode produksi?

• Jalankan ulang webpack, tetapi kali ini dalam mode produksi:

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

Kali ini, webpack menampilkan peringatan yang memberi tahu Anda bahwa PNG Anda file, meskipun beberapa kompresi, masih melebihi batas ukuran yang disarankan. (mode development & production webpack memprioritaskan hal yang berbeda, yang adalah mengapa Anda hanya melihat peringatan ini saat menjalankan webpack dalam mode produksi.)

Sesuaikan konfigurasi Imagemin untuk memperbaiki peringatan ini.

Menyesuaikan Konfigurasi Imagemin

Tambahkan setelan untuk mengompresi gambar PNG dengan meneruskan objek berikut ke ImageminPlugin():

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

Kode ini memberi tahu Imagemin untuk mengompresi PNG menggunakan plugin Pngquant. Tujuan Kolom quality menggunakan rentang nilai min dan max untuk menentukan tingkat kompresi—0 adalah terendah dan 1 adalah tertinggi. Untuk memaksa semua gambar agar dikompresi pada kualitas 50%, teruskan 0.5 sebagai nilai minimum dan maksimum.

✔︎ Check in

File webpack.config.js Anda sekarang akan terlihat seperti ini:

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

Tapi bagaimana dengan JPEG? Project ini juga memiliki gambar JPEG, jadi Anda harus menentukan cara kompresi juga.

Menyesuaikan Konfigurasi Imagemin (lanjutan)

Daripada menggunakan plugin default imagemin-webpack-plugin untuk kompresi JPG (imagemin-jpegtran), gunakan plugin imagemin-mozjpeg. Tidak seperti Jpegtran, Mozjpeg memungkinkan Anda menentukan kualitas kompresi untuk kompresi JPG Anda. Kita sudah sudah menginstal plugin Mozjpeg untuk Anda di Glitch ini, tetapi Anda harus edit file webpack.config.js Anda:

• Inisialisasi plugin imagemin-mozjpeg dengan menambahkan baris berikut di bagian atas file webpack.config.js:

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

• Tambahkan properti plugins ke objek yang diteruskan ke ImageminPlugin(), sehingga sekarang objek akan terlihat seperti ini:

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

Kode ini memberi tahu webpack untuk mengompresi JPG ke kualitas 50 (0 adalah yang terburuk; 100 adalah yang terbaik) menggunakan plugin Mozjpeg.

Catatan: Apakah Anda ingin tahu mengapa Mozjpeg ditambahkan ke array plugin, tetapi Pngquant tidak? Pertanyaan bagus.

Jika Anda menambahkan setelan untuk {i>plugin<i} yang merupakan {i>plugin<i} default imagemin-webpack-plugin, parameter ini dapat ditambahkan sebagai pasangan objek kunci pada objek diteruskan ke ImageminPlugin(). Pengaturan untuk Pnquant adalah contoh yang baik dari ini.

Namun, jika Anda menambahkan setelan untuk plugin non-default (misalnya, Mozjpeg), parameter tersebut harus ditambahkan dengan menyertakannya dalam array yang sesuai dengan properti plugins.

✔︎ Check in

Sekarang kode akan terlihat seperti ini:

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

Jalankan ulang webpack dan verifikasi hasilnya dengan Lighthouse

• Di konsol, jalankan kembali webpack:

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

Hore! Perubahan yang Anda lakukan seharusnya dapat memperbaiki peringatan webpack.

webpack memperingatkan Anda tentang gambar berukuran besar, tetapi webpack tidak dapat memberi tahu Anda apakah gambar tersebut tidak dikompresi atau tidak dikompresi. Inilah mengapa penggunaan {i>tool <i}yang tepat Lighthouse untuk memverifikasi perubahan Anda.

"Enkode gambar secara efisien" dari Lighthouse audit performa dapat memberi tahu Anda apakah gambar JPEG di laman Anda dikompresi secara optimal.

• Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh .
• Jalankan audit performa Lighthouse (Lighthouse > Opsi > Performa) di versi aktif Glitch dan memverifikasi bahwa Enkode secara efisien gambar lulus.

Berhasil! Anda telah menggunakan Imagemin untuk mengompresi gambar di halaman secara optimal.