webpack-spritesmith可自动合并png/gif图标为雪碧图并生成精确background-position的css，需统一源图尺寸、配置background-size、使用整数坐标、控制雪碧图宽高在2048px内且添加padding防采样越界。
用 webpack-spritesmith 自动生成雪碧图和CSS规则
Webpack 项目里最省心的方式就是接入 webpack-spritesmith，它能自动扫描指定目录下的 PNG/GIF 图标，合并为一张图，并生成带精确 background-position 的 CSS 块。不需要手动算坐标，也不用维护 sprite.png 和 CSS 的同步问题。
常见错误现象：background-position 值是小数、负值没对齐、高清屏下图标模糊——基本都是因为没配 background-size 或源图尺寸不统一。
- 安装：运行
npm install --save-dev webpack-spritesmith - 配置时强制所有源图裁切为相同尺寸（如 48×48），避免空隙干扰定位计算
- 输出的 CSS 中必须包含
background-size，例如background-size: 200px 48px;，否则 dpr=2/3 设备上会模糊 - 生成的 sprite 文件名建议加哈希（如
icon-sprite.[contenthash:6].png），避免缓存失效问题
为什么不能直接用 WebP 格式做 Sprite
WebP 虽然体积小、压缩率高，但浏览器解码器不支持从单张 WebP 图中按区域截取显示——background-position 在 WebP 上会失效，整个图被当做一个不可分割的整体渲染。所以 Sprite 必须用 PNG 或 GIF。
如果项目已全面转向 WebP，又想减请求数，应放弃 Sprite，改用 <picture></picture> + srcset 按设备像素比动态加载不同分辨率图，而不是强行拼接。
- Sprite 场景只适用于尺寸固定、变化极少的装饰性图（如工具栏 icon、评分星星）
- 头像、商品图、轮播图等需要缩放或响应式切换的，天然不兼容 Sprite
- Android 4.4–6.0 WebView 占比仍不可忽略，这些环境只走 HTTP/1.1，Sprite 减少排队效果明显
在线工具仅适合临时调试，别用于生产
像 Sprite Cow、CSS Sprites Generator 这类在线工具，只能帮你“看”坐标，不能生成可维护的构建流程。一旦图标增删，就得重画图、重填 position、重测多端显示——人力成本远高于写个自动化配置。
更隐蔽的问题是：它们通常不校验源图尺寸一致性，导出的 CSS 很可能在 iOS Safari 或某些 Android WebView 里错位一两个像素，而这种问题在开发机上看不出来，上线后才暴露。
- 线上构建必须保证输入图标尺寸一致（推荐脚本预处理：用 Sharp 批量裁切）
- 生成的 sprite 图宽高建议控制在 2048px 以内，避免 iOS Safari 渲染异常或内存溢出
- 若图标总数超 50 个，考虑按功能模块拆分多个 sprite（如
nav-sprite.png、form-sprite.png），而非塞进一张大图
background-position 必须用整数，且禁止靠 padding/margin 微调
CSS Sprite 的定位逻辑是像素级截取，background-position: -48.5px 0 这种写法在 DPR=2 设备上会导致亚像素渲染模糊；用 padding-left: 2px 去“凑位置”，本质是破坏了背景图与容器的对齐关系，后续换字体、改盒模型都会连锁偏移。
正确做法是让自动化工具输出整数坐标，并在 CSS 中严格使用 background-position: -48px 0 这类值。
- 所有源图必须无透明毛边、无抗锯齿外溢，否则拼合后相邻图标边缘会透出底色
- 生成时开启
padding参数（如 2px），确保图标间有间隙，防止 GPU 渲染时采样越界 - 测试阶段务必在真机上打开 DevTools → Rendering → “Emulate high DPI” 查看是否模糊
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
