前端优化：如何将多张图标合并成一张，做好资源链接优化？

最新推荐文章于 2023-06-01 10:51:13 发布

chongfeng2994

最新推荐文章于 2023-06-01 10:51:13 发布

阅读量561

点赞数

文章标签：前端 ViewUI

原文链接：https://my.oschina.net/u/3987720/blog/2962741

版权

前端素材资源一般由图片、SVG、音频、视频组成，每个资源都会有一个独立的链接请求，当一个web页面素材过多时，这表示该页面将会建立多次链接请求，这将直接导致页面加载速度变慢。那么是否可以将一些常用的图标素材合并成一张图片实现共用呢？答案是可以的，这样在使用时只需建立一次链接请求即可，这个步骤有点复杂，我们一步步来。

首先，创建一个名称为prepros的web项目，目录结构如图所示：

此项目使用的是sass样式编译，编译工具为Prepros，关于这款工具使用说明可以参考文章《介绍一款极度优秀的前端编译工具Prepros，让您的编程效率几何级的提升》。将要合并的6张图标素材如下：

这里要注意一点，图标文件夹icons必须放在一个名称为images的目录下，且该images目录和样式编译文件sass.scss同级，否则编译时会发生如下错误。

错误表明，当将images名称改为img或其它时，将编译出错，此处应该是个Prepros的bug，必须要用images文件夹来合并图片。

打开sass.scss文件，写入代码：

$icons: sprite-map("icons/*.png", $spacing:15px);
@mixin iconsbg {
    background: $icons;
} 

@mixin iconbg($map, $sprite) {
    background-position: sprite-position($map, $sprite, 0, 0, false);
    $w: image-width(sprite-file($map, $sprite));
}

.icon {
    @include iconsbg;
}
 
.icon_1 {
    @include iconbg($icons,
    1);
    width: 16px;
    height: 16px;
}

.icon_2 {
    @include iconbg($icons,
    2);
    width: 16px;
    height: 16px;
}

.icon_3 {
    @include iconbg($icons,
    3);
    width: 16px;
    height: 16px;
}

.icon_4 {
    @include iconbg($icons,
    4);
    width: 16px;
    height: 16px;
}

.icon_5 {
    @include iconbg($icons,
    5);
    width: 16px;
    height: 16px;
}

.icon_6 {
    @include iconbg($icons,
    6);
    width: 16px;
    height: 16px;
}

$icons表示合并icons目录下的所有图标素材。

@mixin iconsbg表示引用合并后的图片作为背景图。

@mixin iconbg($map, $sprite)表示定位每张图标素材的位置。

.icon_1表示对图标1.png的引用。

点击保存，Prepros将会自动编译该文件，并生成了一张由 1.png~6.png 6张图标合并成的一张新组合素材icons-s72d43477be.png，如图所示：

打开该图片，如图所示，6张图片已经合成1张。

打开index.html文件，引入编译生成的sass.css文件，代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="assets/sass.css" />
	</head>

	<body>
		<div class="icon icon_1"></div>
		<div class="icon icon_2"></div>
		<div class="mycolor">Hello China</div>
	</body>

</html>

用浏览器打开页面，发现有个引用错误，合并图路径出错了。

不要紧，修改一下sass.scss文件即可，修改代码如下：

.icon {
    @include iconsbg;
    background: url('./images/icons-s72d43477be.png');
}

重新保存允许，我们的图标显示出来了。

（注）实际上只建立了一次链接 http://localhost:7879/assets/images/icons-s72d43477be.png

此外，还有一种途径可以科学的管理和使用图标，使用阿里云提供的在线图标管理工具 iconfont。

官网地址是http://www.iconfont.cn/，里面图标均由SVG实现，不仅可以管理和共享自己的图标库，官网上也有大量的图标库可供使用，基本能满足大部分项目对图标的使用需求。当对图标没有太敏感需求的时候，建议前端工程师们使用 iconfont 来处理图标相关需求。

转载于:https://my.oschina.net/u/3987720/blog/2962741

chongfeng2994

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端优化：如何将多张图标合并成一张，做好资源链接优化？

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/79205172 前端素材资源一般由图片、SVG、音频、视频组成，每个资源都会有一个独立的链接请求，当一个web页面素材...
复制链接

扫一扫