前端优化-图片打包处理base64的原因

为什么要将图片打包成base64格式

首先我们知道在前端技术中每一张图片的加载都会进行一次http请求，而每次http请求都是需要时间的，所以当网页中图片资源很多的时候,如果不进行base64转译，就会进行很多的http请求，会使页面加载时间大大的增加。

优点：

1.减少网页http请求，大大减少页面加载时间
base64编码可以将图片添加到css中，实现请求css即可下载下来图片，减少了在此请求图片的请求

缺点：

1.base64格式的内容太多
base64编码也是很长的，所以对比较大的图片，并不适合使用，这样会加大页面的加载资源的大小，也会使页面加载时间增多

webpack处理图片

 // 处理图片资源
 {
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
     loader: 'url-loader', // url-loader会把小于limit的文件转为base64
     options: {
         esModule: false,
         limit: 2 * 1024,
         name: utils.assetsPath('images/[name].[contenthash].[ext]'), // 如果没有转为base64,输出到这里，文件名改为这个
         outputPath: (url, resourcePath, context) => {
             // 正式环境加上webp拓展名,性能优化项
             if (process.env.ACT_ENV === 'production') {
                 return `${url}.webp`;
             } else {
                 return url;
             }
         }
     }
 },

服务端图片处理

其实上述说的只是前端对本地的图片资源优化，但是服务端返回的图片其实也是需要进行优化的，当然这块就需要服务端进行处理了，我目前的公司是通过图片链接后增加webp后缀来进行服务端压缩，这样处理可以将图片资源压缩掉80%的大小，大大减小了服务器的压力，也加快了页面的加载