第 08 课：自动生成雪碧图

2024-04-24 22:35:45

背景

在开发过程中，可能存在大量的小图片和小图标，虽然每张图的尺寸不大，但每次都需要发起一次 HTTP 请求，从性能优化的角度来说是不合理的。常见的做法是我们将多个小图片拼成一张大图（前端界叫做雪碧图或 CSS Sprite），然后通过 CSS 的 background-position 来控制图片的展示，这样可以极大减少 HTTP 请求次数。我们可以手动拼装雪碧图，但这样效率实在太低。本节课程将介绍如何在项目中通过自动化的方式生成雪碧图。

1 雪碧图生成的方式

目前常用的自动化方式有两种。

一种是预处理的方式，通过 webpack-spritesmith 提前将图片合成雪碧图，并生成对应的样式文件。其优点是所有的样式数据已经帮开发者生成好，开发者只需要引入样式即可，使用起来非常方便。缺点是所有的图片都合并到一个大图中，页面间有耦合。

另一种是后处理的方式。通过 postcss-sprite 对 CSS 文件进行分析，将 CSS 中包含的图片收集后合并成雪碧图再替换 CSS 中的代码。其优点是 CSS 中有哪些图片就合并哪些，不会把没用到的图片也合并进去。一张 CSS 样式表对应一张雪碧图。缺点是开发者需要手动去测量每张小图的尺寸。

两种方式各有所长，本教程中将选用预处理的方式生成雪碧图。

2 安装 webpack-spritesmith

首先本地安装开发依赖 webpack-spritesmith：

npm install -D webpack-spritesmith

3 配置

安装完成后，更新 webpack.config.js：

//...省略其他代码
const SpritesmithPlugin = requir

第 08 课：自动生成雪碧图相关推荐

JAVA自动生成雪碧图sprites和样式CSS文件（包含原始图标CSS、雪碧图CSS）
在项目的开发过程中,如果一个页面有很多的小图标展现.浏览器展示页面时会向后台服务器发送很多的请求获取对应的图片,这样既浪费资源,也使得页面的加载变得很慢,影响客户的体验.此时我们可以采用将这些小图标放 ...
使用Grunt生成雪碧图
1.Grunt是基于 Node.js 的项目构建工具,所以使用Grunt之前必须先安装好node.js和npm包管理器 2.全局安装Grunt的命令行支持,安装完之后,命令提示符中将会识别grunt命 ...
gulp将多张小图自动合成雪碧图
最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...
CSS中如何快速生成雪碧图
最近遇到了导入雪碧图的项目,因为雪碧图更加好写,然后发现了一款比较好用的可以在线生成雪碧图的网页: https://www.toptal.com/developers/css/sprite-gener ...
webpack原理篇（六十二）：实战开发一个自动合成雪碧图的loader
说明玩转 webpack 学习笔记支持的语法对样式里面图片引用后面加 __sprite 进行图片合并如何将两张图片合成一张图片? 使用 spritesmith https://github.c ...
让字体图标代替雪碧图，减少请求带宽
一.什么是字体图标 icon font 及使用场景从百度百科一下什么事icon font,没有解析.那就用在使用过程的对字体图标的理解,解释一下. 字体图标就是利用字体来显示网页中的的纯色图标,或 ...
前端性能优化总结/懒加载、函数节流、优化dom操作、雪碧图、合并文件
1.减少 HTTP 请求数量在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信.浏览器与服务器需要经过三次握手,每次握手需要花费大量时间.而且不同浏览器对资源文件并发请求数量有限(不同浏览器 ...
CSS 网站小图标雪碧图
https://www.jianshu.com/p/7482dde882af 网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题:目前小图标显示常见有两种方式(其他方式欢迎补充):1. ...
使用雪碧图Css Sprite精灵 | 加速网页响应速度
什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...

最新文章

热门文章