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