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 ekleyerekimagemin-mozjpeg
eklentisini başlatın:
const imageminMozjpeg = require('imagemin-mozjpeg');
ImageminPlugin()
için 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, 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.