PNG Sprite

减少 HTTP 请求数，可以有效缩短响应时间，CSS Sprite 作为其实现的一种技巧，在 VD 中实现如下：

首先，将需要合并的图片放入 src/sprite 目录中：

注意：图片命名分隔符只能使用 - （中杠），否者后续 Less 变量会查找不到。

然后，在你的 less 文件中导入 sprite 图变量文件：

@import "~sprite.less";

注意：文件名前面的 ~ ，不能去掉。

最后，调用 Less 方法，查找 Sprite 图位置：

.placeholder-404 {
    .placeholder-icon {
        .sprite(@404);
    }
    h3 {
        .sprite(@404-slogan);
    }
}

减少图片资源的 HTTP 请求数还有另外一种实现，使用 Data URL，VD 已经自动实现该功能，当你的图片资源小于 10000 Bytes（字节）时将自动转成 Data URL。改值可以在 项目设置 > 预编译 > Asset 内设置。

最终效果如下：

.test {
    background: white url('data:image/png;base64,iVBORw0KGgoAA
    AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l
    EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6
    P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}

Data URIs 的浏览器兼容性及注意事项参考：http://caniuse.com/#feat=datauri