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.jsdosyanızın başına aşağıdaki satırı ekleyerekimagemin-mozjpegeklentisini başlatın:
const imageminMozjpeg = require('imagemin-mozjpeg');
ImageminPlugin()'a iletilen nesneye birpluginsö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.