使用imagemin webpack插件的Vue cli 3

Question

使用vue cli 3.如何使用vue.config.js中的https://www.npmjs.com/package/imagemin-webpack-plugin正确优化src / assets / images中的所有图像png / jpg / svg：

const ImageminPlugin = require('imagemin-webpack-plugin').default

module.exports = {
  configureWebpack: {
    devtool: 'source-map',
    plugins: [
      new ImageminPlugin({
        pngquant: {
          quality: '90-95'
        }
      })
    ]
  }
}

但它似乎没有处理我的图像，我错过了什么配置设置？

Answer 1

默认情况下，imagemin-webpack-plugin应该很好地优化PNG，GIF，JPEG和SVG。所以，即使你不使用任何选项（EX：new ImageminPlugin()），你也可以获得所有这些选项。如果你想自定义它压缩的东西，你可以随时查看the docs来定制它。

如果你的图像没有被优化，可能是因为插件有一个“后备”，如果优化的图像比原始图像更大，它将只使用原始图像。有时源图像不会压缩得更好，而回落到原始图像似乎是一个更好的默认值。