vue cli&imagemin-webpack-plugin实现图片压缩

最近新项目的图片太多，加个图片压缩~

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

5.参考

Webpack Plugins

vue-cli webpack 相关