简介
在前端开发中，为了提升网站性能，我们通常将多张小图片合成一张大图，再用 CSS 中的 background-position 属性将所需部分剪辑出来。sprity-css 就是一个可以帮助我们实现这个过程的 npm 包。
sprity-css 可以将多个小图片合成一张大图，并且自动生成相应的 CSS 文件。在自动合成图片的时候，sprity-css 还可以对图片进行缓存，减少了对网站性能的影响。
安装
sprity-css 包是在 npm 中提供的，所以我们可以通过 npm install 命令来安装这个包。
npm install sprity-css --save-dev
使用
1. 创建目录
首先创建一个名为 icons 的目录，用于存放所需要合成的小图片。
2. 准备小图片
将需要合成的小图片放到 icons 目录中，注意这些图片的格式必须相同。
3. 编写配置文件
接着在项目的根目录中，创建一个 sprity-css 的配置文件 sprity.json。
-- -------------------- ---- -------
-
------ --------------
------ ------------------
-------- ------------------
------------ -
-
-------- --
------ --
--
-
-------- --
------ ---
-
--
------------- -------
--------------- -
-src 指定小图片的路径；out 指定合成的大图片的输出路径；style 指定生成的 CSS 文件的输出路径。
dimension 用于指定 DPI 和 Ratio，其中 DPI 表示像素密度，Ratio 表示 CSS 像素和真实像素的比值，以适应不同设备的屏幕。在 dimension 中可以设置多个值，例如上述配置文件设置了两个值，一个是 1 倍 DPI 和 Ratio，一个是 2 倍 DPI 和 Ratio。
style-type 和 style-indent 分别用于指定生成的 CSS 文件类型和缩进大小。
4. 运行命令
通过运行以下命令，可以合成大图片，并生成相应的 CSS 文件。
sprity create sprity.json
5. 引入 CSS 文件
将生成的 CSS 文件引入到 HTML 的 <head> 标签中，即可使用其中定义的类名来调用对应的图片。
<head> <link href="./dist/sprite.css" rel="stylesheet"> </head> <body> <div class="icon icon-example"></div> </body>
示例代码
以下是一个完整的使用示例代码。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- ------------
----- ------------------------ -----------------
-------
----- -
-------- -------------
------ -----
------- -----
------------------ ----------
---------------- ------
----------------- -------------------------
-
------------- -
-------------------- - --
------------- ----
-
----------- -
-------------------- ----- --
------------- ----
-
--------
-------
------
---- ----------- --------------------
---- ----------- ------------------
-------
-------意义与指导
通过使用 sprity-css，我们可以有效地减少网站的请求数，从而提升网站的性能。同时，sprity-css 极大地简化了图片合成的过程，大大减少了代码量。
因此，使用 sprity-css 不仅提高了前端工作效率，也有助于提高网站的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709e8ccae46eb111effe