הגדרת הפלאגין של Imagemin Webpack
התקלה הזו כבר מכילה webpack
, webpack-cli
ו-imagemin-webpack-plugin
. כדי להוסיף את ההגדרות של Imagemin, עליכם לערוך את הקובץ webpack.config.js
.
הקובץ webpack.config.js
הקיים בפרויקט הזה העתיק תמונות מהספרייה images/
לספרייה dist/
, אבל לא בוצעה דחיסה שלהן.
- לוחצים על רמיקס לעריכה כדי שיהיה אפשר לערוך את הפרויקט.
- קודם כול, מצהירים על הפלאגין Imagemin על ידי הוספת הקוד הזה בחלק העליון של
webpack.config.js
:
const ImageminPlugin = require('imagemin-webpack-plugin').default;
- בשלב הבא מוסיפים את הקוד הבא בתור הפריט האחרון במערך
plugins[]
. הפעולה הזו מוסיפה את Imagemin לרשימת יישומי הפלאגין שמשתמשים ב-webpack:
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()
]
}
עכשיו יש לכם הגדרת Webpack שדוחסת תמונות באמצעות Imagemin.
הפעלת Webpack
- לוחצים על טרמינל (הערה: אם הלחצן 'מסוף' לא מוצג, ייתכן שתצטרכו להשתמש באפשרות 'מסך מלא').
- כדי לדחוס את התמונות, הריצו את Webpack על ידי הקלדת הפקודה הבאה במסוף:
webpack --config webpack.config.js --mode development
אבל מה קורה אם מריצים Webpack במצב ייצור?
- יש להריץ מחדש את ה-Webpack, אבל הפעם במצב ייצור:
webpack --config webpack.config.js --mode production
הפעם מוצגת ב-webpack אזהרה על כך שקובצי PNG, למרות דחיסה מסוימת, עדיין חורגים ממגבלת הגודל המומלצת.
(המצבים development
ו-production
של Webpack נותנים עדיפות לדברים שונים, ולכן האזהרה הזו מופיעה רק כאשר מריצים את ה-webpack במצב ייצור.)
כדי לתקן את האזהרה הזו, צריך להתאים אישית את הגדרות ה-Imagemin.
התאמה אישית של תצורת ה-Imagemin
מוסיפים הגדרות לדחיסת תמונות PNG על ידי העברת האובייקט הבא אל ImageminPlugin()
:
{pngquant: ({quality: [0.5, 0.5]})}
הקוד הזה מורה ל-Imagemin לדחוס קובצי PNG באמצעות הפלאגין Pngquant. השדה quality
משתמש בטווח הערכים min
ו-max
כדי לקבוע את רמת הדחיסה: 0 הוא הנמוך ביותר ו-1 הוא הגבוה ביותר. כדי לאלץ את כל התמונות לדחוס באיכות של 50%, צריך להעביר את 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 (המשך)
במקום להשתמש בפלאגין ברירת המחדל של imagemin-webpack-plugin
לדחיסת JPG (imagemin-jpegtran
), כדאי להשתמש בפלאגין imagemin-mozjpeg
. בניגוד ל-Jpegtran,
Mozjpeg
אפשר לציין איכות דחיסה לדחיסת JPG. כבר
התקינו עבורך את הפלאגין של Mozjpeg ב-Glitch הזה, אבל עליך
לערוך את קובץ ה-webpack.config.js
:
- מפעילים את הפלאגין
imagemin-mozjpeg
על ידי הוספת השורה הבאה בחלק העליון של קובץwebpack.config.js
:
const imageminMozjpeg = require('imagemin-mozjpeg');
- מוסיפים מאפיין
plugins
לאובייקט שהועבר אלImageminPlugin()
, כך שהאובייקט ייראה עכשיו:
new ImageminPlugin({
pngquant: ({quality: [0.5, 0.5]}),
plugins: [imageminMozjpeg({quality: 50})]
})
הקוד הזה מורה ל-webpack לדחוס קובצי JPG לאיכות של 50 (0 היא הכי גרועה ו-100 היא הכי טובה) באמצעות הפלאגין Mozjpeg.
אם מוסיפים הגדרות לפלאגין שהוא פלאגין ברירת מחדל של 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 בדף שלכם דחוסות בצורה אופטימלית.
- כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .
- מפעילים את בדיקת הביצועים של Lighthouse (Lighthouse > אפשרויות > ביצועים) בגרסה הפעילה של התקלה, ומוודאים שהביקורת מקודדת תמונות ביעילות אושרה.
זהו! השתמשת ב-Imagemin כדי לדחוס באופן אופטימלי את התמונות בדף.