Imagemin webpack প্লাগ-ইন সেট-আপ করুন
এই Glitch-এ আগে থেকেই webpack, webpack-cli এবং
imagemin-webpack-plugin আছে। Imagemin-এর জন্য কনফিগারেশন যোগ করতে, আপনাকে
webpack.config.js ফাইল এডিট করতে হবে।
এই প্রোজেক্টের জন্য আগে থেকে থাকা webpack.config.js, images/ ডিরেক্টরি থেকে dist/ ডিরেক্টরিতে
ছবি কপি করছে, কিন্তু সেগুলি কম্প্রেস করছে না।
- প্রোজেক্ট এডিট করার উপযুক্ত করতে এডিট করার জন্য রিমিক্স করুন বিকল্পে ক্লিক করুন।
- প্রথমে,
webpack.config.js-এর উপরে এই কোড যোগ করে Imagemin প্লাগ-ইন ঘোষণা করুন:
const ImageminPlugin = require('imagemin-webpack-plugin').default;
- এরপর,
plugins[]অ্যারের শেষ আইটেম হিসেবে নিম্নলিখিত কোড যোগ করুন। এটি ওয়েবপ্যাক ব্যবহার করে এমন প্লাগ-ইনের তালিকায় Imagemin যোগ করে:
new ImageminPlugin()
✔︎ চেক-ইন করুন
আপনার সম্পূর্ণ webpack.config.js ফাইলটি এখন এইরকম দেখতে হবে:
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()
]
}
আপনার কাছে এখন একটি ওয়েবপ্যাক কনফিগারেশন আছে যা Imagemin ব্যবহার করে ছবি কম্প্রেস করে।
webpack রান করুন
- টার্মিনাল বিকল্পে ক্লিক করুন (মনে রাখবেন: টার্মিনাল বোতামটি দেখতে না পেলে আপনাকে ফুল-স্ক্রিন বিকল্পটি ব্যবহার করতে হতে পারে)।
- আপনার ছবি কম্প্রেস করতে, কনসোলে নিম্নলিখিত কমান্ড টাইপ করে webpack রান করুন:
webpack --config webpack.config.js --mode development
কিন্তু আপনি প্রোডাকশন মোডে webpack রান করলে কী হবে?
- ওয়েবপ্যাক আবার চালান, তবে এবার প্রোডাকশন মোডে:
webpack --config webpack.config.js --mode production
এইবার, webpack একটি সতর্কতা দেখায় যা আপনাকে জানায় যে আপনার PNG ফাইল, কিছু কম্প্রেশন সত্ত্বেও, এখনও সাজেস্ট করা সাইজের সীমা অতিক্রম করে।
(webpack-এর development ও production মোড বিভিন্ন বিষয়কে অগ্রাধিকার দেয়, যার
কারণে আপনি প্রোডাকশন মোডে webpack চালানোর সময় শুধু এই সতর্কতা দেখতে পান।)
এই সতর্কতা ঠিক করতে আমাদের Imagemin কনফিগারেশন কাস্টমাইজ করুন।
আপনার Imagemin কনফিগারেশন কাস্টমাইজ করুন
ImageminPlugin()-এ নিম্নলিখিত অবজেক্ট পাস করে PNG ছবি কম্প্রেস করার জন্য সেটিংস যোগ করুন:
{pngquant: ({quality: [0.5, 0.5]})}
এই কোড Imagemin-কে Pngquant প্লাগ-ইন ব্যবহার করে PNG কম্প্রেস করতে বলে। কম্প্রেশন লেভেল নির্ধারণ করতে
quality ফিল্ড min ও max রেঞ্জের ভ্যালু ব্যবহার করে—০ হল সর্বনিম্ন ও ১ হল সর্বোচ্চ। সব ছবিকে ৫০% কোয়ালিটিতে কম্প্রেস করতে বাধ্য করার জন্য, সর্বনিম্ন ও সর্বাধিক ভ্যালু হিসেবে 0.5 পাস করুন।
✔︎ চেক-ইন করুন
আপনার webpack.config.js ফাইল এখন এইরকম হওয়া উচিত:
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]}),
})
]
}
কিন্তু JPEG-এর ক্ষেত্রে কী হবে? প্রোজেক্টে JPEG ছবিও আছে, তাই আপনাকে উল্লেখ করতে হবে সেগুলি কীভাবে কম্প্রেস করা হয়েছে।
আপনার Imagemin কনফিগারেশন কাস্টমাইজ করুন (চলবে)
JPG কম্প্রেশনের জন্য imagemin-webpack-plugin-এর ডিফল্ট প্লাগ-ইন (imagemin-jpegtran) ব্যবহার করার পরিবর্তে,
imagemin-mozjpeg প্লাগ-ইন ব্যবহার করুন। Jpegtran-এর মতো নয়,
Mozjpeg আপনাকে JPG কম্প্রেশনের জন্য কম্প্রেশন কোয়ালিটি নির্দিষ্ট করতে দেয়। আমরা
ইতিমধ্যেই এই Glitch-এ আপনার জন্য Mozjpeg প্লাগ-ইন ইনস্টল করেছি, তবে আপনাকে
webpack.config.js ফাইল এডিট করতে হবে:
- আপনার
webpack.config.jsফাইলের একদম উপরে নিম্নলিখিত লাইন যোগ করেimagemin-mozjpegপ্লাগ-ইন শুরু করুন:
const imageminMozjpeg = require('imagemin-mozjpeg');
ImageminPlugin()-এ পাস করা অবজেক্টে একটিpluginsপ্রপার্টি যোগ করুন, যাতে অবজেক্টটি এখন এইরকম দেখায়:
new ImageminPlugin({
pngquant: ({quality: [0.5, 0.5]}),
plugins: [imageminMozjpeg({quality: 50})]
})
এই কোডটি Mozjpeg প্লাগ-ইন ব্যবহার করে JPG-কে ৫০ কোয়ালিটিতে (০ হল সবচেয়ে খারাপ; ১০০ হল সবচেয়ে ভাল) কম্প্রেস করার জন্য webpack-কে নির্দেশ দেয়।
আপনি যদি এমন কোনও প্লাগ-ইনের জন্য সেটিংস যোগ করেন যা
imagemin-webpack-plugin-এর ডিফল্ট প্লাগ-ইন, তাহলে সেগুলি ImageminPlugin()-এ পাস করা অবজেক্টে কী-অবজেক্ট পেয়ার হিসেবে যোগ করা যেতে পারে। Pnquant-এর সেটিংস এর একটি ভালো উদাহরণ।
তবে, আপনি যদি ডিফল্ট নয় এমন প্লাগ-ইনের (যেমন, Mozjpeg) জন্য সেটিংস যোগ করেন, তাহলে
সেগুলি plugins প্রপার্টির সাথে সম্পর্কিত অ্যারেতে অন্তর্ভুক্ত করে
যোগ করতে হবে।
✔︎ চেক-ইন করুন
আপনার কোড এখন এইরকম দেখতে হবে:
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 আবার রান করুন এবং Lighthouse-এর মাধ্যমে ফলাফল যাচাই করুন
- কনসোলে, webpack আবার চালান:
webpack --config webpack.config.js --mode production
কি মজা! আপনার করা পরিবর্তনের ফলে webpack সংক্রান্ত সতর্কতা ঠিক হয়ে যাওয়ার কথা।
webpack আপনাকে বড় ছবি সম্পর্কে সতর্ক করে, কিন্তু ছবিগুলি আনকমপ্রেসড বা আন্ডারকমপ্রেসড কিনা তা বলতে পারে না। এই কারণেই আপনার করা পরিবর্তন যাচাই করতে Lighthouse ব্যবহার করা সবসময় ভাল আইডিয়া।
Lighthouse-এর "দক্ষতার সাথে ছবি এনকোড করুন" পারফর্ম্যান্স অডিট আপনাকে জানাতে পারে যে আপনার পৃষ্ঠার JPEG ছবিগুলি যথাযথভাবে কম্প্রেস করা হয়েছে কিনা।
- সাইটের প্রিভিউ দেখতে, অ্যাপ দেখুন বিকল্পে প্রেস করুন। তারপর
ফুল-স্ক্রিন
বিকল্পে প্রেস করুন। - আপনার Glitch-এর লাইভ ভার্সনে Lighthouse পারফর্ম্যান্স অডিট (Lighthouse > বিকল্প > পারফর্ম্যান্স) রান করুন এবং দক্ষতার সাথে ছবি এনকোড করুন অডিট পাস হয়েছে কিনা তা যাচাই করুন।
হয়ে গেছে! আপনার পৃষ্ঠার ছবিগুলি যথাযথভাবে কম্প্রেস করতে আপনি Imagemin ব্যবহার করেছেন।