Thiết lập trình bổ trợ gói web Imagemin
Nhiễu sóng này đã có webpack
, webpack-cli
và imagemin-webpack-plugin
. Để thêm cấu hình cho Imagemin, bạn cần chỉnh sửa tệp webpack.config.js
.
webpack.config.js
hiện có của dự án này đang sao chép các hình ảnh từ
thư mục images/
vào thư mục dist/
nhưng chưa nén
các hình ảnh đó.
- Nhấp vào Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.
- Trước tiên, hãy khai báo trình bổ trợ Imagemin bằng cách thêm mã này vào đầu
webpack.config.js
:
const ImageminPlugin = require('imagemin-webpack-plugin').default;
- Tiếp theo, hãy thêm mã sau làm mục cuối cùng trong mảng
plugins[]
. Thao tác này sẽ thêm Imagemin vào danh sách các trình bổ trợ mà gói web sử dụng:
new ImageminPlugin()
✔︎ Nhận phòng
Bây giờ, tệp webpack.config.js
hoàn chỉnh của bạn sẽ có dạng như sau:
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()
]
}
Bạn hiện đã có một cấu hình webpack nén hình ảnh bằng Imagemin.
Chạy gói web
- Nhấp vào Thiết bị đầu cuối (lưu ý: nếu nút Thiết bị đầu cuối không hiển thị, bạn có thể cần phải sử dụng tùy chọn Toàn màn hình).
- Để nén hình ảnh, hãy chạy gói web bằng cách nhập lệnh sau vào bảng điều khiển:
webpack --config webpack.config.js --mode development
Nhưng điều gì sẽ xảy ra nếu bạn chạy gói web ở chế độ phát hành công khai?
- Chạy lại gói web, nhưng lần này ở chế độ phát hành chính thức:
webpack --config webpack.config.js --mode production
Lần này, gói web sẽ hiển thị cảnh báo cho bạn biết rằng các tệp PNG của bạn, dù có nén, vẫn vượt quá giới hạn kích thước đề xuất.
(chế độ development
và production
của gói web ưu tiên những yếu tố khác nhau, do đó bạn chỉ thấy cảnh báo này khi chạy gói web ở chế độ phát hành chính thức.)
Tuỳ chỉnh cấu hình Imagemin để khắc phục cảnh báo này.
Tuỳ chỉnh cấu hình Imagemin
Thêm chế độ cài đặt để nén hình ảnh PNG bằng cách truyền đối tượng sau vào ImageminPlugin()
:
{pngquant: ({quality: [0.5, 0.5]})}
Mã này yêu cầu Imagemin nén các tệp PNG bằng trình bổ trợ Pngquant. Trường quality
sử dụng dải giá trị min
và max
để xác định mức nén – 0 là thấp nhất và 1 là cao nhất. Để buộc tất cả hình ảnh phải nén ở 50% chất lượng, hãy truyền 0.5
dưới dạng cả giá trị tối thiểu và tối đa.
✔︎ Nhận phòng
Bây giờ, tệp webpack.config.js
của bạn sẽ có dạng như sau:
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]}),
})
]
}
Còn JPEG thì sao? Dự án cũng có hình ảnh JPEG, vì vậy, bạn cũng nên chỉ định cách nén các hình ảnh đó.
Tuỳ chỉnh cấu hình Imagemin (tiếp theo)
Thay vì dùng trình bổ trợ mặc định của imagemin-webpack-plugin
để nén JPG (imagemin-jpegtran
), hãy dùng trình bổ trợ imagemin-mozjpeg
. Không giống như Jpegtran,
Mozjpeg cho phép bạn chỉ định chất lượng nén cho quá trình nén JPG của bạn. Chúng tôi đã cài đặt trình bổ trợ Mozjpeg cho bạn trong lỗi này, nhưng bạn cần chỉnh sửa tệp webpack.config.js
của mình:
- Khởi chạy trình bổ trợ
imagemin-mozjpeg
bằng cách thêm dòng sau ở đầu tệpwebpack.config.js
:
const imageminMozjpeg = require('imagemin-mozjpeg');
- Thêm thuộc tính
plugins
vào đối tượng được truyền đếnImageminPlugin()
, để đối tượng đó giờ đây sẽ có dạng như sau:
new ImageminPlugin({
pngquant: ({quality: [0.5, 0.5]}),
plugins: [imageminMozjpeg({quality: 50})]
})
Mã này yêu cầu webpack nén tệp JPG tới chất lượng 50 (0 là kém nhất; 100 là tốt nhất) bằng trình bổ trợ Mozjpeg.
Nếu đang thêm các chế độ cài đặt cho một trình bổ trợ là trình bổ trợ mặc định của imagemin-webpack-plugin
, thì bạn có thể thêm các chế độ cài đặt này dưới dạng một cặp khoá-đối tượng trên đối tượng được truyền đến ImageminPlugin()
. Các chế độ cài đặt cho Pnquant là một ví dụ điển hình cho trường hợp này.
Tuy nhiên, nếu thêm chế độ cài đặt cho các trình bổ trợ không mặc định (ví dụ: Mozjpeg), bạn phải thêm các trình bổ trợ đó bằng cách đưa chúng vào mảng tương ứng với thuộc tính plugins
.
✔︎ Nhận phòng
Mã của bạn bây giờ sẽ có dạng như sau:
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})]
})
]
}
Chạy lại gói web và xác minh kết quả bằng Lighthouse
- Trong bảng điều khiển, hãy chạy lại gói web:
webpack --config webpack.config.js --mode production
Thật tuyệt! Những thay đổi của bạn chắc hẳn đã khắc phục các cảnh báo gói web.
webpack cảnh báo bạn về các hình ảnh lớn, nhưng không thể cho bạn biết hình ảnh được giải nén hay bị nén. Đây là lý do bạn nên sử dụng Lighthouse để xác minh những thay đổi của mình.
Quy trình kiểm tra hiệu suất "Mã hoá hình ảnh hiệu quả" của Lighthouse có thể cho bạn biết liệu hình ảnh JPEG trên trang của bạn đã được nén một cách tối ưu hay chưa.
- Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào Fullscreen (Toàn màn hình).
- Chạy bài kiểm tra hiệu suất của Lighthouse (Lighthouse > Tuỳ chọn > Hiệu suất) trên phiên bản trực tiếp của Glitch và xác minh rằng bài kiểm tra Hình ảnh mã hoá hiệu quả đã được vượt qua.
Thành công! Bạn đã sử dụng Imagemin để nén hình ảnh trên trang một cách tối ưu.