图片压缩和合并
在企业开发中为了提升网页的访问速度, 我们除了会压缩 HTML/CSS/JS 以外, 还可以对网页上的图片进行压缩和合并, 压缩可以减少网页体积, 合并可以减少请求次数,压缩打包之后的图片,每次在打包图片之前, 我们可以通过配置 webpack
对打包的图片进行压缩, 以较少打包之后的体积
首先来看看没有利用压缩插件进行压缩过的图片大小,待会可以进行比对验证,如下:
压缩图片
利用 image-webpack-loader/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 打包之后的大小如下: