使用image-minimizer-webpack-plugin提示Unknown plugin: imagemin-svgo报错如何解决

方案1：修复现有image-minimizer-webpack-plugin配置 #

你遇到的报错是新版image-minimizer-webpack-plugin不再内置imagemin系列插件适配导致的，直接写字符串"svgo"无法被识别，且原有配置也不会自动把其他格式图片转换为avif，需要调整配置逻辑。

推荐换用sharp作为底层处理工具，依赖更少更稳定，不会出现插件找不到的问题：

1. 先卸载已安装的imagemin-svgo，安装所需依赖：

yarn remove imagemin-svgo
yarn add sharp image-minimizer-webpack-plugin --dev

2. 替换vue.config.js配置为以下内容：

const { defineConfig } = require('@vue/cli-service')
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

module.exports = defineConfig({
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      config.plugins.push(
        new ImageMinimizerPlugin({
          test: /\.(jpe?g|png|gif|webp|svg)$/i,
          // 压缩原有格式图片
          minimizer: {
            implementation: ImageMinimizerPlugin.sharpMinify,
            options: {
              encodeOptions: {
                jpeg: { quality: 80 },
                png: { quality: 80 },
                webp: { quality: 80 },
                svg: {
                  plugins: [
                    {
                      name: "preset-default",
                      params: {
                        overrides: {
                          removeViewBox: false, // 保留viewBox避免svg缩放异常
                        },
                      },
                    },
                  ],
                },
              },
            },
          },
          // 自动生成对应avif格式文件
          generator: [
            {
              preset: "avif",
              implementation: ImageMinimizerPlugin.sharpGenerate,
              options: {
                encodeOptions: {
                  avif: {
                    cqLevel: 33,
                    speed: 5,
                  },
                },
              },
            },
          ],
        })
      )
    } else {
      console.log("\n Image compression skipped \n");
    }
  },
  // 配置avif格式资源解析规则
  chainWebpack: config => {
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|webp|avif)(\?.*)?$/)
  }
})

该配置可同时实现原有图片压缩、svg优化、自动生成avif格式文件三个需求，不会删除原文件。

方案2：无需修改webpack配置的轻量方案 #

如果不想折腾webpack插件兼容性，可以用构建后处理的方式实现需求：

1. 安装依赖：

yarn add svgo sharp-cli --dev

2. 在package.json中新增构建后处理脚本：

{
  "scripts": {
    "build": "vue-cli-service build && yarn optimize:assets",
    "optimize:assets": "svgo -f dist/img --config .svgo.config.js && sharp -i 'dist/img/*.{jpg,png}' --format avif --avif-quality 70 -o dist/img/"
  }
}

3. 项目根目录新建.svgo.config.js配置svg压缩规则：

module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
        },
      },
    },
  ],
};

之后执行yarn build会先完成项目打包，再自动执行svg压缩和图片转avif操作，完全避开webpack插件的兼容性问题。

内容的提问来源于stack exchange，提问作者Gorilka