Imagemin'i webpack ile kullanma

Katie Hempenius

Imagemin webpack eklentisini ayarlama

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

Bu proje için mevcut webpack.config.js, resimleri images/ dizininden dist/ dizine kopyalıyor ancak sıkıştırmıyor.

• Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.

• Öncelikle, bu kodu webpack.config.js üst tarafına ekleyerek Imagemin eklentisini tanımlayın:

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

• Ardından, plugins[] dizisinin son öğesi olarak aşağıdaki kodu ekleyin. Bu işlem, Imagemin'i webpack'ın kullandığı eklentiler listesine ekler:

new ImageminPlugin()

✔︎ Giriş

webpack.config.js dosyanızın tamamı artık aşağıdaki gibi görünecektir:

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 Imagemin'i kullanarak resimleri sıkıştıran bir webpack yapılandırmanız var.

Webpack'i çalıştırma

• 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, web paketini üretim modunda çalıştırırsanız ne olur?

• Web paketini yeniden çalıştır, ancak bu kez üretim modunda:

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

Bu kez webpack, PNG dosyalarınızın bazı sıkıştırmalara rağmen önerilen boyut sınırını aştığını bildiren bir uyarı gösterir. (Web paketinin development ve production modları farklı öğelere ö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ştirme

Aşağıdaki nesneyi ImageminPlugin() hedefine ileterek PNG resimlerini 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ında, sıkıştırma düzeyini belirlemek için min ve max değer aralığı kullanılır. 0 en düşük, 1 ise en yüksek değerdir. Tüm resimlerin% 50 kalitede sıkıştırılmasını zorunlu kılmak için 0.5 değerini hem minimum hem de maksimum değer olarak iletin.

✔︎ Giriş

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

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 JPEG dosyaları ne olacak? Projede JPEG resimler de bulunduğundan bunların nasıl sıkıştırıldığını da belirtmeniz gerekir.

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

JPG sıkıştırması için imagemin-webpack-plugin ürününün varsayılan eklentisini (imagemin-jpegtran) kullanmak yerine imagemin-mozjpeg eklentisini kullanın. Jpegtran'ın aksine, Mozjpeg JPG sıkıştırmanız için bir sıkıştırma kalitesi belirlemenize olanak tanır. Bu Glitch'te Mozjpeg eklentisini sizin için yükledik ancak webpack.config.js dosyanızı düzenlemeniz gerekir:

• webpack.config.js dosyanızın başına aşağıdaki satırı ekleyerek imagemin-mozjpeg eklentisini başlatın:

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

• ImageminPlugin()'a 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, webpack'in Mozjpeg eklentisini kullanarak JPG'leri 50 kalitede (0 en kötü, 100 en iyi) sıkıştırmasını söyler.

imagemin-webpack-plugin için varsayılan bir eklenti olan eklenti ayarları ekliyorsanız bu ayarlar, ImageminPlugin()'a iletilen nesnede anahtar-nesne çifti olarak eklenebilir. Pnquant ayarları bunun iyi bir örneğidir.

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

✔︎ Giriş

Kodunuz şu şekilde 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 web paketini yeniden çalıştırın:

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

Yaşasın! Değişiklikleriniz webpack uyarılarını düzeltmiş olmalıdır.

webpack, büyük resimler konusunda sizi uyarır ancak resimlerin sıkıştırılıp sıkıştırılmadığını veya yeterince sıkıştırılıp sıkıştırılmadığını size söyleyemez. Bu nedenle değişikliklerinizi doğrulamak için Lighthouse'u kullanmak her zaman iyi bir fikirdir.

Lighthouse'ın "Resimleri verimli bir şekilde kodlama" performans denetimi, sayfanızdaki JPEG resimlerinin optimum şekilde sıkıştırılıp sıkıştırılmadığını size bildirebilir.

• Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran düğmesine basın.
• Glitch'inizin canlı sürümünde Lighthouse performans denetimini (Lighthouse > Seçenekler > Performans) çalıştırın ve Resimleri verimli bir şekilde kodlama 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.