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, images/ dizinindeki resimleri dist/ dizinine kopyalıyor ancak sıkıştırmıyor.
- Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiksle'yi tıklayın.
- Öncelikle,
webpack.config.jsdosyasının en üstüne şu kodu ekleyerek Imagemin eklentisini tanımlayın:
const ImageminPlugin = require('imagemin-webpack-plugin').default;
- Ardından, aşağıdaki kodu
plugins[]dizisinin son öğesi olarak ekleyin. Bu işlem, Imagemin'i webpack'in kullandığı eklentiler listesine ekler:
new ImageminPlugin()
✔︎ Giriş
Tamamlanmış webpack.config.js dosyanız ş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()
]
}
Artık Imagemin 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 webpack'i üretim modunda çalıştırırsanız ne olur?
- Webpack'i bu kez üretim modunda yeniden çalıştırın:
webpack --config webpack.config.js --mode production
Bu sefer webpack, PNG dosyalarınızın biraz sıkıştırılmış olmasına rağmen önerilen boyut sınırını aştığını bildiren bir uyarı gösterir.
(webpack'in development ve production modları farklı şeylere öncelik verir. Bu nedenle, bu uyarıyı 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ştirme
Aşağıdaki nesneyi ImageminPlugin() yöntemine ileterek PNG resimleri sıkıştırma ayarlarını 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 düzeyini belirlemek için min ve max aralığında değerler kullanı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 hem minimum hem de maksimum değer olarak 0.5 değerini iletin.
✔︎ Giriş
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 var. Bu nedenle, 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ırma için imagemin-webpack-plugin uygulamasının varsayılan eklentisini (imagemin-jpegtran) kullanmak yerine imagemin-mozjpeg eklentisini kullanın. Jpegtran'dan farklı olarak Mozjpeg, JPG sıkıştırmanız için bir sıkıştırma kalitesi belirtmenize olanak tanır. Bu Glitch'te Mozjpeg eklentisini sizin için zaten yükledik ancak webpack.config.js dosyanızı düzenlemeniz gerekir:
webpack.config.jsdosyanızın en üstüne aşağıdaki satırı ekleyerekimagemin-mozjpegeklentisini başlatın:
const imageminMozjpeg = require('imagemin-mozjpeg');
ImageminPlugin()işlevine 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'e Mozjpeg eklentisini kullanarak JPG'leri 50 kalitesine (0 en kötü, 100 en iyi) sıkıştırmasını söyler.
imagemin-webpack-plugin için varsayılan bir eklenti olan bir eklentiye ayar ekliyorsanız bunlar, ImageminPlugin() öğesine iletilen nesne üzerinde bir anahtar-nesne çifti olarak eklenebilir. Pnquant ayarları buna iyi bir örnektir.
Ancak varsayılan olmayan eklentiler (ör. Mozjpeg) için ayar ekliyorsanız bu ayarlar, plugins özelliğine karşılık gelen diziye dahil edilerek eklenmelidir.
✔︎ Giriş
Kodunuz aşağıdaki gibi görünmelidir:
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! Yaptığınız değişiklikler webpack uyarılarını düzeltmiş olmalıdır.
webpack, büyük resimler konusunda sizi uyarır ancak resimlerin sıkıştırılmamış veya az sıkıştırılmış olup olmadığını söyleyemez. Bu nedenle, değişikliklerinizi doğrulamak için Lighthouse'u kullanmak her zaman iyi bir fikirdir.
Lighthouse'un "Resimleri verimli bir şekilde kodlayın" performans denetimi, sayfanızdaki JPEG resimlerin optimum şekilde sıkıştırılıp sıkıştırılmadığını öğrenmenizi sağlar.
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. 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 Resimleri verimli bir şekilde kodlayın denetiminin başarılı olduğunu doğrulayın.
Başarılı aktarım Sayfanızdaki resimleri en uygun şekilde sıkıştırmak için Imagemin'i kullandınız.