Vue Webpack configuration doesn't minify images

I'm assuming you used vuejs-templates/webpack, which does not include image optimization out of the box. You can easily add this (with imagemin-webpack-plugin) in your Webpack config:

1. Install ImageminWebpackPlugin with: npm i -D imagemin-webpack-plugin

2. In build/webpack.prod.conf.js, import the plugin, and configure it in plugins[] (after CopyWebpackPlugin):

   const ImageminPlugin = require('imagemin-webpack-plugin').default;const webpackConfig = merge(baseWebpackConfig, {  plugins: [    // ...    new ImageminPlugin({      test: /\.(jpe?g|png|gif|svg)$/i,      /* other ImageMin configs */    })  ]}

Running ImageminWebpackPlugin after CopyWebpackPlugin ensures the copied images from static are run through ImageMin optimization.

GitHub repo demo

In the current version of Vue you can use a vue.config.js that looks like this:

const ImageminPlugin = require('imagemin-webpack-plugin').default;module.exports = {  configureWebpack: {    plugins: [      new ImageminPlugin({        disable: process.env.NODE_ENV !== 'production',      })    ]  }}

This will enable Imagemin on production builds but skip on development builds.

You can have a try. It will help you minify images automaticlly without complicated algorithm configurations. It can also help you to encode(and inline) images (behave more flexible than url-loader).

https://github.com/GaoYYYang/image-optimize-loader

module.exports = {  module: {    rules: [      {        test: /\.(png|jpe?g|webp|git|svg|)$/i,        use: [          {            loader: 'img-optimize-loader'          },        ],      },    ],  },};