Webpack5 production mode compression image ImageMinimizerPlugin

---

1. What is ImageMinimizerPlugin?

Its actual dependency name is image-minimizer-webpack-plugin, which is used to compress image assets using imagemin. Don't worry about the size of the image after use, and you don't need to find other compression tools to manually compress the images used in the project. Now they can be automatically optimized/compressed.

2. Why do you need ImageMinimizerPlugin when you already have an asset?

{
    
    
	   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]",
	     },
 }

Previously, I used asset (the built-in file resource module of webpack5) in the loader to process resources such as images. Images smaller than 20kb will be converted into dataUrl format by base64. Why use ImageMinimizerPlugin to process image resources again? Is this superfluous?
The answer is definitely not, because the asset is only for certain pictures that are relatively small in size. For example, the above pictures with a size smaller than 20kb are converted into dataUrl. Not all pictures are suitable for conversion, so the remaining picture assets can only be classified into categories. To a file named by you, because the asset itself does not have the function of compressing pictures, so it must be done with the help of image compression plug-ins such as ImageMinimizerPlugin.

3. How to use ImageMinimizerPlugin?

1. Installation dependencies: Install the plug-in in the root directory of the project. This step is critical, because the tools that ImageMinimizerPlugin needs to use depend on many, more than one.

   image-minimizer-webpack-plugin
   imagemin-gifsicle
   imagemin-jpegtran
   imagemin-optipng
   imagemin-svgo
   imagemin
   use npm i <all dependencies above> -d -s

2. Configure the ImageMinimizerPlugin plugin in the Webpack configuration file.

//引入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",
	                      },
	                    },
	                  ],
	                },
	              ],
	            ],
	          },
	        },
      }),
	]
}

Fourth, the results of ImageMinimizerPlugin compression

Before using ImageMinimizerPlugin, the image format of my project was packaged in png format, which kept the format before it was packaged. After using ImageMinimizerPlugin, it became a picture in WebP format, so I checked the two formats online. The difference is as follows

Both WebP format and PNG format are common image formats, and there are the following differences between them:

1. Compression Algorithms: WebP uses advanced compression algorithms that can often compress images more efficiently than PNG, resulting in smaller file sizes. This means that under the same image quality, the picture file in WebP format will be smaller.

2. Support transparency: PNG supports complete transparency, which can create images with complex transparency effects. WebP, on the other hand, supports transparency through lossy compression, so there may be some subtle losses when dealing with transparent images.

3. Browser Compatibility: PNG format is widely supported and can be displayed on all major browsers. However, the WebP format may not be fully supported on some older versions of browsers, and compatibility detection and fallback schemes are required to ensure a good user experience.

4. Animation support: PNG format does not support animation, while WebP supports combining multiple image frames into one animated image.

To sum up, the WebP format has advantages in file size and supports animation functions, but has slight limitations in transparency and browser compatibility. Therefore, which format to choose should be decided based on specific needs and target platforms.