Vue cli 3 с плагином imagemin для веб-пакетов

Question

Использование vue cli 3. Как правильно оптимизировать все изображения png/jpg/svg из src / assets / images, используя https://www.npmjs.com/package/imagemin-webpack-plugin в vue.config.js:

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()) вы получите все это. Если вы хотите настроить степень сжатия, вы всегда можете взглянуть на документы, чтобы настроить его.

Если ваши изображения не оптимизируются, это может быть связано с тем, что у плагина есть "запасной вариант", при котором, если оптимизированное изображение БОЛЬШЕ, чем исходное изображение, оно будет просто использовать исходное. Иногда исходные изображения просто не будут сжиматься лучше, и возврат к оригиналу казался лучшим вариантом по умолчанию.

Answer 2

По умолчанию оптимизации JPEGs не произошла в моем случае, все работало после установки imagemin-mozjpeg пакета

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