东道设计公司官网首页东莞整站优化

场景：登录页背景图片体积过大，加载慢，影响用户体验。

压缩前：

压缩后：

实现步骤：

1、安装image-webpack-loader

npm install image-webpack-loader

2、添加webpack的loader配置，和plugin配置同级

module:{rules:[{test: /\.(gif|png|jpe?g|svg)$/i,use:[{loader:'image-webpack-loader',options:{mozjpeg: {progressive: true, quality: 60, // JPG 输出的质量 一般60为可接受的},optipng: {enabled: true,},pngquant: {quality: [0.5, 0.65], // PNG 质量范围speed: 4,},gifsicle: {interlaced: false,// 优化GIF},webp: {quality: 75, // 转换为 webp},}}]}]}

3、打包

npm run build:prod

期间报错，说是没有imagemin-mozjpeg这个moudle。（这一步看请情况，也许你不报这个错，根据报错去解决，少哪个包就安哪个包）

4、安装imagemin-mozjpeg

npm install imagemin-mozjpeg

5、再次打包，npm run build:prod

打开dist/static/img，找到对应图片，发现图片被成功压缩啦