Imagemin'i webpack ile kullanma

Katie Hempenius

Bu codelab'i takip etmek için bu Glitch'i ikinci bir sekmede açın.

Imagemin webpack eklentisini ayarlama

Bu Aksaklık zaten webpack, webpack-cli ve imagemin-webpack-plugin. Imagemin yapılandırmasını eklemek için webpack.config.js dosyanızı düzenleyin.

Bu proje için mevcut webpack.config.js, şuradan görüntü kopyalıyor: images/ dizinini dist/ dizinine gönderdim, ancak sıkıştırmaktır.

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

Not: Resimleri neden yeni bir dist/ klasörüne kopyalarsınız? dist/, "dağıtım"ın kısaltmasıdır Biraz farklı olabilecekleri için orijinal kod, resim vb. öğeleri dağıtılmış sürümlerinden ayrı tutmak da oldukça yaygın bir uygulamadır.

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

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

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

new ImageminPlugin()

Not: Neden dizinin sonuna eklemeliyim? Bunu eklemek, Imagemin'in diğer tüm eklentilerden sonra en son çalışmasını sağlar.

✔︎ Check-in

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 görüntüleri 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 aşağıdaki komutu pencereye yazarak webpack'i çalıştırın: konsol:

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 dosyanızın dosyaları, biraz sıkıştırmaya rağmen önerilen boyut sınırını aşıyor. (web paketinin development ve production modları farklı unsurlara öncelik verir. bu nedenle yalnızca webpack'i ü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() 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. İlgili içeriği oluşturmak için kullanılan quality alanı,minmax sıkıştırma seviyesi: 0 en düşük, 1 ise en yüksek değerdir. Tüm resimleri %50 kalitede sıkıştırılması için 0.5 değerini hem minimum hem de maksimum değer olarak iletin.

✔︎ 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'lere? Projede JPEG resimleri de bulunduğundan, nasıl sıkıştırıldıklarını da belirleyebilirsiniz.

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 kullanmak yerine (imagemin-jpegtran) olarak ayarlamak için 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. Biz Mozjpeg eklentisini bu Glitch'te sizin için yüklemiş ancak yeniden yüklemeniz gerekir: webpack.config.js dosyanızı düzenleyin:

• Şu satırı ekleyerek imagemin-mozjpeg eklentisini başlatın: (webpack.config.js dosyanızın üstüne)

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

• ImageminPlugin() öğesine geçirilen nesneye, şu şekilde bir plugins özelliği ekleyin: nesne artık şu şekilde görünür:

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

Bu kod, webpack'in JPG'leri 50 kalitede sıkıştırmasını ister (0 en kötüdür; 100'dür).

Not: Mozjpeg'in eklenti dizisine neden eklendiğini ancak Pngquant'ın neden eklenmediğini merak ediyor musunuz? Güzel soru.

Varsayılan eklenti olan bir eklenti için ayarlar ekliyorsanız imagemin-webpack-plugin ise nesneye anahtar-nesne çifti olarak eklenebilir ImageminPlugin() adresine iletildi. Pnquant ayarları iyi bir örnektir. bu.

Ancak, varsayılan olmayan eklentiler için ayarlar ekliyorsanız (örneğin, Mozjpeg) içeriyorsa, dosyalar dosyaya karşılık gelen diziye dahil edilerek eklenmelidir plugins özelliği.

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

Web paketini yeniden çalıştırıp Lighthouse ile sonuçları doğrulayın

• Konsolda web paketini yeniden çalıştırın:

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

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

webpack sizi büyük resimler konusunda uyarır, ancak resimlerin büyük boyutlu resimler olup olmadığını sıkıştırılmamış veya az sıkıştırılmış biçimde sunulur. Bu nedenle, Lighthouse'u ziyaret edin.

Lighthouse'un "Görüntüleri verimli bir şekilde kodlayın" performans denetimi, uygulamanızın JPEG resimleri en iyi şekilde sıkıştırılır.

• Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran .
• Lighthouse performans denetimini çalıştırın (Lighthouse > Seçenekler > Performans) hatasını kontrol edin ve kodun etkili bir şekilde görüntüler denetiminden geçildi.

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