文章目录
一、 ImageMinimizerPlugin是什么？
它的实际依赖名称是 image-minimizer-webpack-plugin，用于使用imagemin来压缩图像资源。使用以后不要担心图像的大小了，也不需要再找其他压缩工具对项目中用到的图片进行手动压缩，现在它们是可以自动被优化/压缩的。
二、已经有了asset，为什么需要ImageMinimizerPlugin？
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 20 * 1024 // 小于20kb的图片会被base64处理
}
},
generator: {
// 将图片文件输出到 static 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/[hash:8][ext][query]",
},
}
之前在loader里面用asset（webpack5内置的文件资源模块）已经对图片等资源进行加工处理，把小于20kb的图片会被base64处理转换成dataUrl形式了，为什么还要用到ImageMinimizerPlugin再处理一次图片资源，这是不是多此一举？
答案肯定不是的，因为asset只是对某些图片大小比较小，比如上面的大小小于20kb的图片才转换成dataUrl，不是任何图片都适合转换，那剩下的图片asset 只能做到把他们归类到某个你自定义命名的文件，因为asset 本身不具备压缩图片功能，所以必须借助ImageMinimizerPlugin等图片压缩插件去完成。
三、怎么使用ImageMinimizerPlugin？
-
安装依赖：在项目根目录下安装插件，这步很关键，因为ImageMinimizerPlugin需要用到的工具依赖很多，不止一种。
image-minimizer-webpack-plugin
imagemin-gifsicle
imagemin-jpegtran
imagemin-optipng
imagemin-svgo
imagemin
使用 npm i <以上全部依赖> -d -s -
在 Webpack 配置文件中配置 ImageMinimizerPlugin插件。
//引入ImageMinimizerPlugin依赖
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
// 压缩操作一般写在optimization里面
optimization:{
// 压缩的操作
minimizer:[
// 使用ImageMinimizerPlugin进行压缩
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminGenerate,
options: {
plugins: [
["gifsicle", {
interlaced: true }],
["jpegtran", {
progressive: true }],
["optipng", {
optimizationLevel: 5 }],
[
"svgo",
{
plugins: [
"preset-default",
"prefixIds",
{
name: "sortAttrs",
params: {
xmlnsOrder: "alphabetical",
},
},
],
},
],
],
},
},
}),
]
}
四、ImageMinimizerPlugin压缩的成果
在没使用ImageMinimizerPlugin之前，我项目的图片格式打包完成之后是png格式，保持了未打包之前的格式，在使用了ImageMinimizerPlugin之后，变成了WebP格式的图片，所以我上网查了这两个格式的区别如下
WebP格式和PNG格式都是常见的图片格式，它们之间有以下区别：
-
压缩算法：WebP使用了先进的压缩算法，通常可以比PNG更高效地压缩图像，从而减小文件大小。这意味着在相同的图像质量下，WebP格式的图片文件会更小。
-
支持透明度：PNG支持完全的透明度，可以创建具有复杂透明特效的图像。而WebP则通过有损压缩来支持透明度，因此在处理透明图像时可能会有一些细微的损失。
-
浏览器兼容性：PNG格式被广泛支持并可在所有主流浏览器上显示。然而，WebP格式在某些旧版本的浏览器上可能不被完全支持，需要通过兼容性检测和回退方案来确保良好的用户体验。
-
动画支持：PNG格式不支持动画，而WebP支持将多个图像帧合并为一个动画图像。
综上所述，WebP格式在文件大小上具有优势，并且支持动画功能，但在透明度和浏览器兼容性方面略有限制。因此，选择哪种格式应该根据具体的需求和目标平台来决定。