浅谈 Webpack 如何处理图片(开发、打包、优化)
从webpackbook的LoadingAssets一章中延申出来。
改善前端项目体验中，很重要的点就是静态资源的优化。它是由于浏览器客户端在同一时间针对同一域名的请求有一定资源限制。如果资源过多、过大就会使得页面卡顿。
静态资源中，又以图片最为典型。那么我们在开发中该如何处理图片呢？
webpack是前端较为常用的手脚架工具，本文以它为例。
主要分为开发、打包、优化三个方面来介绍
示例地址:webpackdemo
开发
webpack可以用使用url-loader 将静态图片转化为base64编码的字符串，并内联在对应的脚本中。大幅度地较少了页面的请求数，所以在开发阶段可以无限制地使用。具体方法
//npminstallurl-loader--save-dev
rules:[{
test:/\.(png|jpg)$/,
use:{
loader:'url-loader',
},
}]
以demo-example为例，Gakki.jpg被转化为了base64编码的图片。在开发阶段，没什么问题，但是如果在实际环境中，会发现一个很大的问题，将图片越大转化为base64编码的字符串就越长，将会导致整个Js脚本的大小飙升。
打包
为了减小脚本的大小，我们需要告诉webpack什么情况下采用url-loader去内联图片，什么情况下采用其他的loader。所以首先需要对url-loader进行配置
rules:[{
test:/\.(png|jpg)$/,
use:{
loader:'url-loader',
options:{
limit:15000,
name:'[name].[ext]',
},
},
}]
在options中设定一个阈值属性limit:15000，表明当图片小于该阈值15kb时，采用内联形式加载。那么如果超过阈值，我们该怎么办？
可以利用fallback属性指定采用file-loader 来处理，具体见配置
options:{
limit:15000,
fallback:'file-loader',
name:'images/[name].[hash].[ext]',
},
默认情况下，file-loader会返回options依据文件内容返回一个MD5Hash来构建文件名。
如果同时需要file-loader与url-loader的情况，需要设置limit来做区分。
优化
为了进一步地优化体验，我们可以采用以下策略：
- 控制图片质量，压缩图片大小；
- 配置
标签的srcset来适应不同的屏幕；
- 合成雪碧图，减少图片资源请求数；
- 使用占位图。
控制图片质量，压缩图片大小
为了和url-loader配合，引入image-webpack-loader，同时配置图片的loader
{
test:/\.(png|jpg)$/,
use:[
{
loader:'url-loader',
//同上
options,
},
{
loader:'image-webpack-loader',
//配置不同图片的质量
options:{
mozjpeg:{
progressive:true,
quality:65,
},
optipng:{
enabled:true,
},
pngquant:{
quality:'65-90',
speed:4,
},
gifsicle:{
interlaced:false,
},
webp:{
quality:75,
},
},
},
],
}
然后运行npmrunbuild，很明显的发现，图片的大小有了明显的变化。这种对于图片的压缩对于生产环境特别有价值，因为它减少了下载图像资源所需的带宽量，从而加快了站点或应用程序的速度。
也可以采用imagemin-webpack-plugin插件。
配置标签的srcset来适应不同的屏幕
resize-image-loader和responsive-loader可以生成srcset的图片合集，可以在现代游览器上获得更好地体验，同时可以更好地控制浏览器加载哪些图像以及何时获得更高的性能。
合成雪碧图，减少图片资源请求数
Spriting技术允许将多个较小的图像组合成单个图像。它对于Web开发很有价值，同时也避免了请求开销。
webpack-spritesmith能够生成雪碧图和Sass/Less/Stylusmixins。必须设置SpritesmithPlugin，将其指向目标图像，并设置生成的mixin的名称。
使用占位图
与以上对比，这个loader使用起来相对复杂，它加载图像并将其转化为image/svg+xmlURL编码数据。通常它可以与file-loader和url-loader一起使用，以便在加载实际图像时显示占位符。配置为
{
test:/\.(gif|png|jpe?g)$/i,
use:[
{
loader:'image-trace-loader'
},
{
loader:'url-loader',
options:{
limit:8192
}
}
]
}
这样，你在loader图片时，就会获得
//src为图片，trace为loader生成的占位图
import{src,trace}from'./assets/images/gakki-363kb.jpg'
//定义图片组件为
exportconstimg=({src,trace})=>{
constimg=newImage()
img.src=trace
img.onload=function(){
img.src=src
}
returnimg
}
//挂载在document.body上
document.body.appendChild(img({src,trace}))
参考：
- webpackbook
- webpackdoc
- 若干npmreadme
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。