Vue minify images

// Step 1: Install the necessary dependencies
npm install --save-dev imagemin imagemin-webp imagemin-mozjpeg imagemin-pngquant

// Step 2: Create a Vue plugin for image minification
// plugins/imageMinify.js
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminPngquant = require('imagemin-pngquant');

const imageMinifyPlugin = {
  apply(compiler) {
    compiler.hooks.emit.tapAsync('ImageMinifyPlugin', async (compilation, callback) => {
      const images = Object.keys(compilation.assets).filter(asset => asset.match(/\.(png|jpe?g)$/));

      const tasks = images.map(async image => {
        const buffer = compilation.assets[image].source();
        const plugins = [
          imageminMozjpeg({ quality: 80 }),
          imageminPngquant({ quality: [0.6, 0.8] }),
        ];

        const { data } = await imagemin.buffer(buffer, {
          plugins,
        });

        compilation.assets[image].source = () => data;
      });

      await Promise.all(tasks);
      callback();
    });
  },
};

// Step 3: Integrate the plugin in your Vue project
// vue.config.js
const path = require('path');

module.exports = {
  configureWebpack: {
    plugins: [imageMinifyPlugin],
  },
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => Object.assign(options, { limit: 10240 }));
  },
};

// Step 4: Optimize Webpack build for production // vue.config.js module.exports = { productionSourceMap: false, filenameHashing: true, chainWebpack: config => { if (process.env.NODE_ENV === 'production') { config.optimization.minimizer('terser').tap(args => { args[0].terserOptions.compress.drop_console = true; return args; }); } }, }; ```