Search code examples
vue.jswebpackimagemin

Vue cli 3 with imagemin webpack plugin

Using vue cli 3. How to correctly optimize all images png/jpg/svg from src/assets/images using https://www.npmjs.com/package/imagemin-webpack-plugin in vue.config.js:

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

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

But it seems like it's not processing my images, what config setting do i miss?

Solution

  • The imagemin-webpack-plugin by default should optimize PNGs, GIFs, JPEGs, and SVGs pretty well. So even if you use no options (EX: new ImageminPlugin()) you will get all of those. If you want to customize how much it's compressing things, you can always take a look at the docs to customize it.

    If your images aren't being optimized, it may be because the plugin has a "fallback" where if the optimized image is LARGER than the original image, it will just use the original one. Sometimes source images just won't compress any better, and falling back to the original seemed like a better default.