最近新项目的图片太多,加个图片压缩~
1.下载imagemin-webpack-plugin
npm i imagemin-webpack-plugin --save
2. vue.config.js中写入
const ImageminPlugin = require('imagemin-webpack-plugin').default
const path = require('path')
const imagePlugin = new ImageminPlugin({
disable: process.env.NODE_ENV !== 'production', // Disable during development
pngquant: {
quality: '65-80'
},
jpegtran: { // jpeg
quality: 65,
},
gifsicle: { // gif
interlaced: true,
optimizationLevel: 3,
},
cacheFolder: path.join(__dirname, './imageMinCache')
})
module.exports = {
configureWebpack: {
plugins: [
imagePlugin
]
}
}
将缩小后的图像缓存到
cacheFolder
缓存文件夹中。在下一次运行插件时将首先检查缓存的图像。如果缓存的图像已经存在,则直接使用。如果不存在则将被优化并在下次构建打包时写入到cacheFolder
。
注意: 这是一个非常简单的缓存实现,如果你更新这个插件中的配置项,它并不会智能地清除缓存。缓存中的文件可能比图像多很多,这也正常,因为这是延迟使用 imagemin 来确定文件是否是图像的副作用。我们可以通过设置适当的测试正则表达式来避免。示例放到表格后
总之,加了这个缓存cacheFolder之后build的时间要比没有加快很多,可怜我最近太忙,没时间去测试时间
--quality 0-100
图片质量。对于颜色没有特别要求的可以缩减到 10, 但是越小压缩率越低,通常不需要设置。一般65-80差不多了
3.ignore掉cache文件
#imagemin cache
4.效果
缓存的图片:
未加压缩之前npm run build
加了压缩之后npm run build