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; }); } }, }; ```