带 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。所以即使你不使用任何选项（例如：new ImageminPlugin()）你也会得到所有这些。如果您想自定义它的压缩程度，您可以随时查看 the docs 进行自定义。

如果您的图片没有被优化，可能是因为插件有一个 "fallback" 如果优化后的图片比原始图片大，它将只使用原始图片。有时源图像不会压缩得更好，回到原始图像似乎是更好的默认设置。

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

Vue cli 3 with imagemin webpack plugin

webpack

vue.js

imagemin