webpack5 Image Minimizer减少图片体积提升打包构建速度

ImageMinimizerWebpackPlugin | webpack 中文文档​​​​​​ 

仓库代码下载地址https://gitee.com/zhouyunfang_admin/webpack5-base/tree/webpack-advanced/

为什么使用Image Minimizer

开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。

我们可以对图片进行压缩，减少图片体积。

注意：如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。

Image Minimizer是什么

image-minimizer-webpack-plugin: 用来压缩图片的插件

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

还有剩下包需要下载，有两种模式选其一：

无损压缩

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

有损压缩

npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D

 webpack.config.js(生产模式)

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png)$/i,
        type: "asset",
      },
    ],
  },
 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",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),
        ]
    }
};

1. 打包时会出现报错：

2. Error: Error with 'src\images\1.jpeg': '"C:\Users\86176\Desktop\webpack\webpack_code\node_modules\jpegtran-bin\vendor\jpegtran.exe"'
   Error with 'src\images\3.gif': spawn C:\Users\86176\Desktop\webpack\webpack_code\node_modules\optipng-bin\vendor\optipng.exe ENOENT
   

 我们需要安装两个文件到 node_modules 中才能解决, 

• jpegtran.exe
• 资源下载地址https://download.csdn.net/download/qq_40190624/87034341

需要复制到 node_modules\jpegtran-bin\vendor 下面

jpegtran.exe官网地址http://jpegclub.org/jpegtran/ 

• optipng.exe

需要复制到 node_modules\optipng-bin\vendor 下面

optipng.exe官网地址

optipng.exe上传的资源也可以下载

https://download.csdn.net/download/qq_40190624/87034308https://download.csdn.net/download/qq_40190624/87034308