Question

使用vue cli 3.如何使用vue.config.js中的R: Open new graphic device with dev.new() does not work从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。因此，即使您不使用任何选项（例如：new ImageminPlugin()），您也将获得所有这些选项。如果要自定义要压缩的内容，可以随时查看the docs对其进行自定义。

如果未对图像进行优化，则可能是因为插件具有“后备”功能，如果优化后的图像比原始图像大，它将仅使用原始图像。有时源图像压缩得不会更好，而回退到原始图像似乎是更好的默认值。

Answer 2

在我的情况下，默认情况下未发生JPEG优化，安装imagemin-mozjpeg软件包后一切正常

var ImageminPlugin = require('imagemin-webpack-plugin').default
var imageminMozjpeg = require('imagemin-mozjpeg')
...
configureWebpack: {
  plugins: [
    new ImageminPlugin({
      ...
      plugins: [
        imageminMozjpeg({
          quality: 85
        })
      ]
    })
  ]   
}

带有Imagemin Webpack插件的Vue CLI 3

2 个答案: