问题描述项目中经常会引入一些图片资源，比如jpg|jpeg|png|gif|ico，一般情况下，我们需要做一些性能优化，看大小，看大小，提高生产环境的资源加载速度。因此，本文记录大图使用image-webpack-loader插件压缩，小图使用url-loader转成base64格式，对比优化前后的差异。以下代码是笔者在生产环境中使用的，亲测有效。可以直接复制粘贴url-loader的使用首先，url-loader和image-webpack-loader都依赖于file-loader，file-loader简单来说就是一个资源加载模块，找到文件资源的加载器，然后也是可以为静态资源生成哈希值，即唯一身份证。一般不需要配置。我们主要是通过url-loader和image-webpack-loader配置下载url-loader和file-loader来配置对应的图片加载，这里不再赘述。我们主要看转成base64的效果；因为下面也提到了image-webpack-loader，所以代码放在image-webpack-loader的最后。webpack-loader，否则可能会出错，我这里使用的是6.0.0版本，大家可以使用这个版本。另外，之前已经安装过file-loader，这里就不用安装了cnpmiimage-webpack-loader@6.0.0--save不用Image-webpack-loaderscreenshot使用image-webpack-loaderscreenshot对比两张图，我们可以看到使用image-webpack-loader压缩后，大小和加载时间都优化了很多，所以这个loader还是可以的。两个loader的完整代码以vue项目为例，在vue.config中。js的chainWebpack可以加入如下代码chainWebpack(config){config.module.rule("images").test(/\.(jpg|jpeg|png|gif|ico)$/)//给这些图像类型Docompression.use("url-loader")//url-loader应该与file-loader一起使用来进行图像压缩。loader("url-loader").options({limit:1024*12,//小于12kb的图片压缩成base64，图片太大无法转base64，但不合适name:"static/img/[name].[ext]"//指定打包图片的存放位置，一般在staticname下的img文件夹。ext分别是：文件名。文件后缀（按原图片名）}).end()//回到上一级继续添加loader.use('image-webpack-loader').loader("image-webpack-loader").options({disable:process.env.NODE_ENV=='development'?true:false,//开发环境禁用压缩，生产环境只压缩，提高开发调试速度mozjpeg:{quality:60},//压缩JPEG图片，压缩质量为60，范围为0到100optipng:{enabled:true},//压缩PNG图片，enabled为true时启用压缩pngquant:{quality:[0.65,0.90],speed:4},//质量间隔和速度使用默认值gifsicle:{interlaced:false},//Interlacegifforprogressiverenderingdefaultfalsewebp:{quality:60}//压缩webp图片，压缩质量为60，取值范围为0到100}).end()//回到上一层继续添加loader.enforce('post')//表示下面配置的loader，即image-webpack-loader}会先执行，详细的配置项会总结一下，去npm或者github看看，不过上面的常用配置项基本可以解决大部分需求，勉强够个好记性，不如用烂笔记录一下^_^
