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