设置 Imagemin Webpack 插件
此 Glitch 已包含 webpack
、webpack-cli
和 imagemin-webpack-plugin
。如需为 Imagemin 添加配置,您需要修改 webpack.config.js
文件。
此项目的现有 webpack.config.js
已将图片从 images/
目录复制到 dist/
目录,但尚未对其进行压缩。
- 点击 Remix to Edit 使项目可修改。
- 首先,在
webpack.config.js
顶部添加以下代码,以声明 Imagemin 插件:
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()
]
}
现在,您已经有一个使用 Imagemin 压缩图片的 webpack 配置。
运行 webpack
- 点击终端(注意:如果“终端”按钮未显示,您可能需要使用“全屏”选项)。
- 如需压缩图片,请在控制台中输入以下命令来运行 Webpack:
webpack --config webpack.config.js --mode development
但是,如果在生产模式下运行 webpack,会发生什么情况呢?
- 重新运行 webpack,但这次在生产模式下:
webpack --config webpack.config.js --mode production
这一次,webpack 会显示一条警告,告知您 PNG 文件尽管进行了一些压缩,但仍超过了建议的大小限制。(webpack 的 development
和 production
模式会优先处理不同的内容,因此在生产模式下运行 webpack 时,你只会看到此警告。)
自定义 Imagemin 配置以修复此警告。
自定义 Imagemin 配置
通过将以下对象传递给 ImageminPlugin()
,添加用于压缩 PNG 图片的设置:
{pngquant: ({quality: [0.5, 0.5]})}
此代码会告知 Imagemin 使用 Pngquant 插件压缩 PNG。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-mozjpeg
插件,而不要使用 imagemin-webpack-plugin
的默认 JPG 压缩插件 (imagemin-jpegtran
)。与 Jpegtran 不同的是,Mozjpeg 可让您为 JPG 压缩指定压缩质量。我们已在此 Glitch 中为您安装 Mozjpeg 插件,但您需要修改 webpack.config.js
文件:
- 在
webpack.config.js
文件顶部添加以下代码行,以初始化imagemin-mozjpeg
插件:
const imageminMozjpeg = require('imagemin-mozjpeg');
- 向传递给
ImageminPlugin()
的对象添加plugins
属性,使对象现在如下所示:
new ImageminPlugin({
pngquant: ({quality: [0.5, 0.5]}),
plugins: [imageminMozjpeg({quality: 50})]
})
此代码会告知 Webpack 使用 Mozjpeg 插件将 JPG 文件压缩至 50(最差;100 表示最佳)质量。
如果您要为 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 图片是否经过了最佳压缩。
- 如需预览网站,请按查看应用,然后按全屏 。
- 对当前版本的 Glitch 运行 Lighthouse 性能审核(Lighthouse > 选项 > 性能),并验证是否已通过高效编码图片审核。
成功!您已使用 Imagemin 以最佳方式压缩网页上的图片。