Webpack5 生产模式压缩图片ImageMinimizerPlugin

文章目录

• [一、 ImageMinimizerPlugin是什么？](#一、 ImageMinimizerPlugin是什么？)
• 二、已经有了asset，为什么需要ImageMinimizerPlugin？
• 三、怎么使用ImageMinimizerPlugin？
• 四、ImageMinimizerPlugin压缩的成果

---

一、 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？

1. 安装依赖：在项目根目录下安装插件，这步很关键，因为ImageMinimizerPlugin需要用到的工具依赖很多，不止一种。

   image-minimizer-webpack-plugin

   imagemin-gifsicle

   imagemin-jpegtran

   imagemin-optipng

   imagemin-svgo

   imagemin

   使用 npm i <以上全部依赖> -d -s

2. 在 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格式都是常见的图片格式，它们之间有以下区别：

1. 压缩算法：WebP使用了先进的压缩算法，通常可以比PNG更高效地压缩图像，从而减小文件大小。这意味着在相同的图像质量下，WebP格式的图片文件会更小。

2. 支持透明度：PNG支持完全的透明度，可以创建具有复杂透明特效的图像。而WebP则通过有损压缩来支持透明度，因此在处理透明图像时可能会有一些细微的损失。

3. 浏览器兼容性：PNG格式被广泛支持并可在所有主流浏览器上显示。然而，WebP格式在某些旧版本的浏览器上可能不被完全支持，需要通过兼容性检测和回退方案来确保良好的用户体验。

4. 动画支持：PNG格式不支持动画，而WebP支持将多个图像帧合并为一个动画图像。

综上所述，WebP格式在文件大小上具有优势，并且支持动画功能，但在透明度和浏览器兼容性方面略有限制。因此，选择哪种格式应该根据具体的需求和目标平台来决定。