webpack-图片压缩

图片压缩和合并

在企业开发中为了提升网页的访问速度, 我们除了会压缩 HTML/CSS/JS 以外, 还可以对网页上的图片进行压缩和合并, 压缩可以减少网页体积, 合并可以减少请求次数，压缩打包之后的图片，每次在打包图片之前, 我们可以通过配置 webpack 对打包的图片进行压缩, 以较少打包之后的体积

首先来看看没有利用压缩插件进行压缩过的图片大小，待会可以进行比对验证，如下：

压缩图片

利用 image-webpack-loader/img-loader 压缩图片：

• https://www.npmjs.com/package/image-webpack-loader
• https://www.npmjs.com/package/img-loader

本文就以 image-webpack-loader 为例两个插件都可以进行压缩，首先安装 image-webpack-loader：

npm install image-webpack-loader --save-dev

修改 webpack 配置：

{
    loader: 'image-webpack-loader',
    options: {
        mozjpeg: {
            progressive: true,
            quality: 65
        },
        // optipng.enabled: false will disable optipng
        optipng: {
            enabled: false,
        },
        pngquant: {
            quality: [0.65, 0.90],
            speed: 4
        },
        gifsicle: {
            interlaced: false,
        },
        // the webp option will enable WEBP
        webp: {
            quality: 75
        }
    }
},

如上的配置内容当中的 quality 属性配置的值越大，那么图片将会被压缩的越小那么图片的清晰度也会随之变模糊，最终经过 webpack 打包之后的大小如下：