webpack无损压缩本地静态资源图片image-minimizer-webpack-plugin

开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。
我们可以对图片进行压缩，减少图片体积。

一、image-minimizer-webpack-plugin介绍

Image-minimizer-webpack-plugin是一个用于优化和压缩图片的Webpack插件。它使用多个优化器和压缩器来减小图片文件的大小，包括mozjpeg、pngquant、svgo和gifsicle等库。

该插件可以帮助我们在构建应用程序或网站时减少图片文件大小，从而提高网站的性能和速度。在使用Image-minimizer-webpack-plugin之后，我们可以减少页面加载时间，提高用户体验。

除了压缩图片之外，该插件还提供了其他一些功能，如支持WebP格式，并支持使用不同的压缩选项来优化图片。因此，Image-minimizer-webpack-plugin是Web开发人员优化网站和提高性能的重要工具之一。

下载：

npm i image-minimizer-webpack-plugin imagemin -D

其他依赖，无损压缩

npm install --ignore-scripts imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D

配置：

• webpack.config.js

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
module.exports = {
    optimization: {
       minimizer: [
       		// 压缩图片
      		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",
                   		   },
                  		  },
                		  ],
               		 },
              		],
           		 ],
         		 },
      		  },
     		 }),
		]
	}
	
}

配置完成之后就进行打包，可能会打包失败

如图：

报错的地方是这两个依赖中没有这个两个exe文件，
我们需要安装两个文件到 node_modules 中才能解决

去对应的官网下在下来

• jpegtran.exe
  需要复制到 node_modules\jpegtran-bin\vendor 下面
  jpegtran 官网地址： http://jpegclub.org/jpegtran/

• optipng.exe
  需要复制到 node_modules\optipng-bin\vendor 下面
  OptiPNG 官网地址：https://optipng.sourceforge.net/

下载下来之后添加到如图所示的文件目录

添加玩之后再次重新打包就可以啦

npm run build

打包之前我们看看现在的图片大小

如上图是38k

打包后图片大小：

如图打包压缩后的图片大小是29k,接近压缩了10k