webpack打包压缩图片

当我们使用webpack打包的时候,图片往往不会进行压缩处理,打包前多大的图片,打包后还是多大的图片。
图片太大,打包出来的文件也比较大,加载也比较慢。为了提高性能,优化处理,图片打包时进行压缩就很有必要了。
在此,给大家推荐一个插件,实测可用。
imagemin-webpack-plugin:This is a simple plugin that uses Imagemin to compress all images in your project.
github地址:https://github.com/Klathmon/imagemin-webpack-plugin

安装:

npm install imagemin-webpack-plugin

Requires node >=4.0.0

例子:

var ImageminPlugin = require('imagemin-webpack-plugin').default

module.exports = {
  plugins: [
    // Make sure that the plugin is after any plugins that add images
    new ImageminPlugin({
      disable: process.env.NODE_ENV !== 'production', 
      pngquant: {
        quality: '95-100'
      }
    })
  ]
}

这个插件压缩图片需要时间,因此开发环境中关闭这个插件,在生产环境中打包压缩图片时开启。

你可能感兴趣的:(webpack,npm)