הגדרת הפלאגין של 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
- לוחצים על Terminal (הערה: אם לחצן הטרמינל לא מוצג, יכול להיות שתצטרכו להשתמש באפשרות 'מסך מלא').
- כדי לדחוס את התמונות, מריצים את ה-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 בתקלה הזו, אך עליך
עריכה של קובץ 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 בדף דחוסות באופן אופטימלי.
- כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא .
- ניתן להריץ בדיקת ביצועים של Lighthouse (Lighthouse > אפשרויות > ביצועים) בגרסה הפעילה של התקלה וודא שהקידוד היעיל בדיקת התמונות.
הצלחת! השתמשתם ב-Imagemin כדי לדחוס את התמונות בדף בצורה אופטימלית.