Imagemin'i webpack ile kullanma

Katie Hempenius

Imagemin webpack eklentisini ayarlama

Bu Arıza zaten webpack, webpack-cli ve imagemin-webpack-plugin içeriyor. Imagemin yapılandırmasını eklemek için webpack.config.js dosyanızı düzenlemeniz gerekir.

Bu projenin mevcut webpack.config.js öğesi, resimleri images/ dizininden dist/ dizinine kopyalıyor ancak henüz sıkıştırılmamış.

• Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.

• İlk olarak, bu kodu webpack.config.js öğesinin üst kısmına ekleyerek Imagemin eklentisini tanımlayın:

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

• Daha sonra, aşağıdaki kodu plugins[] dizisindeki son öğe olarak ekleyin. Bu işlem, Imagemin'i webpack'in kullandığı eklentiler listesine ekler:

new ImageminPlugin()

✔️ Check-in

webpack.config.js dosyanızın tamamı artık şöyle görünmelidir:

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

Artık resimleri Imagemin kullanarak sıkıştıran bir web paketi yapılandırmanız var.

Webpack'i çalıştır

• Terminal'i tıklayın (not: Terminal düğmesi görünmüyorsa Tam Ekran seçeneğini kullanmanız gerekebilir).
• Resimlerinizi sıkıştırmak için konsola aşağıdaki komutu yazarak webpack'i çalıştırın:

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

Peki webpack'i üretim modunda çalıştırırsanız ne olur?

• Webpack'i yeniden çalıştırın, ancak bu kez üretim modunda:

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

Bu kez webpack, PNG dosyalarınızın biraz sıkıştırmaya rağmen hâlâ önerilen boyut sınırını aştığını bildiren bir uyarı gösterir. (web paketinin development ve production modları farklı şeylere öncelik verir. Bu nedenle bu uyarıyı yalnızca web paketini üretim modunda çalıştırırken görürsünüz.)

Bu uyarıyı düzeltmek için Imagemin yapılandırmamızı özelleştirin.

Imagemin Yapılandırmanızı özelleştirin

Aşağıdaki nesneyi ImageminPlugin() yöntemine ileterek PNG resimleri sıkıştırmak için ayarlar ekleyin:

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

Bu kod, Imagemin'e Pngquant eklentisini kullanarak PNG'leri sıkıştırmasını söyler. quality alanı, sıkıştırma seviyesini belirlemek için min ve max değer aralığını kullanır. 0 en düşük, 1 ise en yüksek değerdir. Tüm resimleri% 50 kalitede sıkıştırılmaya zorlamak için hem minimum hem de maksimum değer olarak 0.5 değerini geçirin.

✔️ Check-in

webpack.config.js dosyanız artık şu şekilde görünmelidir:

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

Peki ya JPEG'ler? Projede JPEG resimler de bulunduğundan, bunların nasıl sıkıştırılacağını da belirtmeniz gerekir.

Imagemin Yapılandırmanızı özelleştirme (devamı)

imagemin-webpack-plugin'nin JPG sıkıştırması için varsayılan eklentisini (imagemin-jpegtran) kullanmak yerine imagemin-mozjpeg eklentisini kullanın. Jpegtran'ın aksine Mozjpeg, JPG sıkıştırması için bir sıkıştırma kalitesi belirtmenizi sağlar. Bu Glitch'te Mozjpeg eklentisini sizin yerinize yüklemiştik ancak webpack.config.js dosyanızı düzenlemeniz gerekiyor:

• Aşağıdaki satırı webpack.config.js dosyanızın en üstüne ekleyerek imagemin-mozjpeg eklentisini başlatın:

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

• ImageminPlugin() için iletilen nesneye bir plugins özelliği ekleyin. Böylece nesne şu şekilde görünür:

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

Bu kod, web paketine JPG'leri Mozjpeg eklentisini kullanarak 50 kalitesinde (0 en kötü, 100 olacak şekilde) sıkıştırmasını söyler.

Varsayılan imagemin-webpack-plugin eklentisi olan bir eklenti için ayarlar ekliyorsanız, bunlar ImageminPlugin() öğesine iletilen nesneye anahtar-nesne çifti olarak eklenebilir. Pnquant ayarları buna iyi bir örnektir.

Ancak, varsayılan olmayan eklentiler (örneğin, Mozjpeg) için ayarlar ekliyorsanız bunların plugins özelliğine karşılık gelen diziye dahil edilmesi gerekir.

✔️ Check-in

Kodunuz aşağıdaki gibi görünecektir:

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

Webpack'i yeniden çalıştırın ve sonuçları Lighthouse ile doğrulayın

• Konsolda webpack'i yeniden çalıştırın:

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

Tebrikler! Değişikliklerinizin web paketi uyarılarını düzeltmiş olması gerekir.

webpack, büyük resimler konusunda sizi uyarır ancak resimlerin sıkıştırılmamış veya yeterince sıkıştırılmamış olduğunu bilemez. Bu nedenle değişikliklerinizi doğrulamak için Lighthouse'u kullanmak her zaman iyi bir fikirdir.

Lighthouse'un "Resimleri verimli şekilde kodlayın" performans denetimi, sayfanızdaki JPEG resimlerinin en uygun şekilde sıkıştırılıp sıkıştırılmadığını size bildirebilir.

• Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a basın.
• Glitch'inizin canlı sürümünde Lighthouse performans denetimini (Lighthouse > Seçenekler > Performans) çalıştırın ve Görüntüleri verimli şekilde kodla denetiminin geçtiğini doğrulayın.

Başarıyla gerçekleştirildi. Sayfanızdaki resimleri en iyi şekilde sıkıştırmak için Imagemin'i kullandınız.