ตั้งค่าปลั๊กอิน Webpack ของ Imagemin
ข้อบกพร่องนี้มี 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 โดยใช้ปลั๊กอิน Pngqu
ฟิลด์ 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()
การตั้งค่าสำหรับ Pnquantity เป็นตัวอย่างที่ดีของ
นี้
อย่างไรก็ตาม หากคุณกำลังเพิ่มการตั้งค่าสำหรับปลั๊กอินที่ไม่ใช่ค่าเริ่มต้น (ตัวอย่างเช่น
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 > ตัวเลือก > ประสิทธิภาพ) ใน Glitch เวอร์ชันที่เผยแพร่อยู่ แล้วตรวจสอบว่าการเข้ารหัสอย่างมีประสิทธิภาพ รูปภาพผ่านการตรวจสอบแล้ว
สำเร็จ! คุณได้ใช้ Imagemin เพื่อบีบอัดรูปภาพในหน้าเว็บของคุณอย่างเหมาะสม