4、CSS Sprite 技术与自动化：雪碧图原理、合成工具（Sprity、PostCSS-Sprites）、在移植项目中的实践

4.1 雪碧图到底解决了什么问题？

说白了，雪碧图就是「把一堆小图拼成一张大图」。你可能会问：这不是多此一举吗？

我刚开始做嵌入式界面移植时也这么想。直到我接手一个老项目——界面里有 40 多个小图标，每个图标单独加载。结果呢？页面加载时白屏时间长达 3 秒，HTTP 请求数爆表。嗯，那时候我才意识到，减少 HTTP 请求才是雪碧图的核心价值。

它的原理其实很简单：

• 把所有小图标合并到一张大图上
• 通过 background-position 控制显示区域
• 利用 background-size 适配不同分辨率

你想想看，一次请求搞定几十个图标，这效率提升可不是一星半点。

4.2 手动合成 vs 自动化工具

我记得最早做雪碧图时，全靠 Photoshop 手动拼。拼完还得一个个量坐标，写 CSS。那叫一个痛苦——改一个图标，整张图重来，坐标全得重新算。

后来我学乖了，开始用自动化工具。这里我重点讲两个：Sprity 和 PostCSS-Sprites。

4.2.1 Sprity：老牌工具，功能全面

Sprity 是我早期项目里用得最多的。它支持多种图片格式，还能自动生成 CSS 和 Less/Sass 变量。

// 安装
npm install sprity sprity-cli -g

// 命令行使用
sprity ./output/ ./icons/*.png --style style.css

// 输出示例
.icon-home {
  background-image: url('sprite.png');
  background-position: -10px -20px;
  width: 32px;
  height: 32px;
}

它的优点很明显：

• 支持 PNG、JPG、SVG 混合输入
• 可自定义排列算法（垂直、水平、二叉树）
• 自动生成 Retina 适配的 2x 图

但有个坑——配置项太多。我曾在项目里为了调一个边距参数，翻了大半天文档。后来我换了更轻量的方案。

4.2.2 PostCSS-Sprites：现代构建流的首选

如果你在用 Webpack 或 Gulp，我强烈推荐 PostCSS-Sprites。它直接集成到 CSS 构建流程里，你只需要写普通的 background-image，它自动帮你合成。

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-sprites')({
      spritePath: './dist/images/',
      retina: true,
      stylesheetPath: './dist/css/',
      groupBy: function(image) {
        // 按目录分组
        if (image.url.indexOf('icons/') !== -1) {
          return 'icons';
        }
        return 'others';
      }
    })
  ]
};

// 源 CSS
.icon-home {
  background-image: url('../icons/home.png');
}

// 输出 CSS
.icon-home {
  background-image: url('../images/sprite.icons.png');
  background-position: -10px -20px;
  width: 32px;
  height: 32px;
}

我个人习惯用 PostCSS-Sprites，因为它零侵入——你不需要改任何 CSS 写法，构建时自动处理。这在移植项目中特别重要，因为老代码往往不能大改。

4.3 在移植项目中的实践

去年我做一个嵌入式界面移植项目，从旧平台迁移到新平台。旧项目有 200 多个图标，分散在 30 多个 CSS 文件里。手动改？那得改到猴年马月。

我的做法是这样的：

1. 先做资源审计：把所有 background-image 提取出来，去重
2. 按模块分组：公共图标放一组，各模块私有图标放一组
3. 配置 PostCSS-Sprites：用 groupBy 自动分组
4. 处理 Retina：旧项目只有 1x 图，新平台需要 2x，我加了 retina: true
5. 验证：用 diff 工具对比新旧界面的像素级差异

结果呢？HTTP 请求从 200 多降到 8 张雪碧图，加载时间从 4.2 秒降到 0.8 秒。嗯，这个数据我记得很清楚。

4.4 雪碧图的核心流程

下面这张图是我自己总结的雪碧图自动化流程，你可以参考一下：

4.5 常见问题与解决方案

4.6 总结

雪碧图技术看起来简单，但用好自动化工具能省下大量时间。我个人建议：

• 新项目直接用 PostCSS-Sprites，集成度高
• 老项目移植先用 Sprity 做一次性合成，再逐步迁移
• 永远记得按模块和尺寸分组，别把所有鸡蛋放一个篮子里

嗯，这一章就到这里。记住一句话：减少 HTTP 请求是界面性能优化的第一课，雪碧图就是最直接的解法。