image-webpack-loader图片压缩

背景：

最近在做大屏，使用序列帧动画的实现动态效果，因为UI同学输出的高保真图片达300张，加上之前项目已经存在许多车型的图片，导致了原本的项目，打包后体积比较大，整体打包后体积593.3M，这在我看起来也十分震惊，为了减少打包后体积，决定使用图片压缩工具，对项目图片进行压缩。

实现路径：

1. 安装工具 image-webpack-loader

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

2. 在vue.config.js中配置

   module.exports = {
       chainWebpack(config) {
           config.module
               .rule('images')
               .use('image-webpack-loader')
               .loader('image-webpack-loader')
               .options({
                   mozjpeg: {progressive: true, quality: 65},
                   optipng: {enabled: true},
                   pngquant: {quality: [0.65, 0.9], speed: 4},
                   gifsicle: {interlaced: false}
               });
       }
   };
   

   PS：如果你是在webpack.base.confi.js文件中配置的话可以试试下面这份配置

   rules: [
       {
           test: /.(png|jpe?g|gif|svg)(?.*)?$/,
           use: [
               {
                   loader: 'file-loader',
                   options: {
                       name: '[name].[hash:7].[ext]'
                   }
               },
               {
                   loader: 'image-webpack-loader',
                   options: {
                       mozjpeg: {
                           progressive: true,
                           quality: 65
                       },
                       optipng: {
                           enabled: true
                       },
                       pngquant: {
                           quality: [0.65, 0.9],
                           speed: 4
                       },
                       gifsicle: {
                           interlaced: false
                       }
                   }
               }
           ]
       }
   ]
   

3. 实现效果

   • dist打包体积对比：压缩后体积减小447.7M

   

   

   • 图片尺寸和请求时间对比:平均每张图片，尺寸减小约1.8M，请求时间减少约70ms

   

   

结果：

压缩后的dist文件小了很多，图片变小了，图片加载速度也更快了。

因为序列帧动画的实现，处理方式是等所有图片异步加载完才开始动画，部署在欧洲的项目，资源请求比较慢，动画需要等很久才能开始，图片压缩后，动画等待的时长也缩短了。