对于小体积的图片,几kb的,建议使用base64格式,因为:直接使用图片,会使用一个http链接进行请求,一个小图片也运行一次http,得不偿失。
但是也有缺点:如果过大的图片使用了base64,会加大html文件或者css文件的体积,导致 关键渲染路径 (html css渲染到浏览器的过程)变慢,但是大图片不会减慢关键渲染路径的速度。
使用webpack 的loader (url-loader) 进行处理小体积的图片:
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: "url-loader",
options: {
name: "[name]_[hash:6].[ext]",
outputPath: "images/",
//推荐使用url-loader 因为url-loader支持limit
//推荐小体积的图片资源转成base64
limit: 12 * 1024, //单位是字节 1024=1kb 小于12kb的图片被编辑成base64,存在于bundle中
},
},
},